Category Archives: Angular

angular npm エラー

エラー内容

codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.

解決方法

package.json 修正
4.0.1 に変更

 "codelyzer": "~4.0.1",

参考

it seems to work updating codelyzer to the latest version (4.0.1) and using angular/material2-builds angular/cdk-builds… we should wait to update to ng 5 using material 👍

https://github.com/angular/material2/issues/8246

angular tutorial

P860

ngmodule でjsモジュールから取り出した、オブジェクトを束ねる。
束ねたものが、Angularモジュール

model

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}{{user.name}}</h1>`,
})
export class AppComponent  {
  name = 'Angular';
  user: User = {
    id: "1",
    name: "yohei"
  }
}

export class User {
  id: string;
  name: string;
}

インストール

パッケージjsonからインストール

npm install
npm install --production

パッケージJSONにないものをインストール。パッケージJSONにも追加する

npm install {package名} --save
npm install {package名} --save-dev

2.3から

angular gae go 開発環境 自動ビルド

設定ファイル変更

angular-gae-app/.angular-cli.json

// 変更前
"outDir": "dist",

// 変更後
"outDir": "../backend/dist",

自動ビルド

angularを更新すると自動で再度ビルドされ、gae backendにdistをコピーしてくれる

ng build --prod --watch

// サブディレクトリにビルドする場合は以下
ng build --prod --deploy-url=/{ディレクトリ名}/ --watch

参考

http://apoc.jp/angular-cli-subdir/

Angular sampleメモ

アクション

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'yohei';
  sayHello() {
    // alert("hello")
    this.title = 'hello!';
  }
}

src/app/app.component.html

<button type="button" name="button" (click)="sayHello()">sayHello

angular 環境構築とデプロイ

インストール

  • Angular
npm install angular
  • クライアント
    https://github.com/angular/angular-cli#installation
npm install -g @angular/cli@1.4.9

アプリケーション構成

$GOPATH/src/github.com/YoheiMiyamoto/angular-gae
├── angular-gae-app
├── gae
├── dist (angular-gae-appから生成する)
├── app.yaml
└── main.go

開発環境で確認

npm install // ライブラリダウンロード
ng serve

リリース

// ビルド
ng build --prod

// gaeにコピー
cp -r  dist ../gae/ 

// goapp deploy

参考

https://qiita.com/nirasan/items/68ccb9808f3739a9c999