README_ja.md

概要

Angular Seed で作成したプロジェクトを Angular CLI に移行するサンプルプロジェクトです。

動作環境

• Node.js 8.x
• Angular 6.x
• Visual Studio Code 1.20以上
  • 拡張機能 Debugger for Chrome

動作確認

1. サンプルのダウンロード

git clone [email protected]:yasu-s/ng-seed-to-cli.git

2. パッケージインストール

cd ng-seed-to-cli
npm install

3. サンプルの起動

Angular Seedでの起動

npm start

Angular CLIでの起動

npm run ng:serve

NPM Script 一覧

Angular Seed

コマンド	概要
npm start	デバッグ実行を行います。
npm run test	単体テストが実行されます。
npm run karma.start-debug	npm run test実行後、デバッグ実行できます。

Angular CLI

コマンド	概要
npm run ng:serve	デバッグ実行を行います。
npm run ng:test	単体テストが実行されます。

Visual Studio Code でのデバッグ

Angular Seed

1. npm start または npm run karma.start-debug で起動する。
2. Visual Studio Code の デバッグメニューからAttach to Chrome - Angular Seedでデバッグ実行をする。

Angular CLI

1. npm run ng:serve または npm run ng:test で起動する。
2. Visual Studio Code の デバッグメニューからAttach to Chrome - Angular CLIでデバッグ実行をする。

Angular Seed からの変更箇所

package.json

devDependenciesに以下を追加する。

• @angular/cli
• @angular-devkit/build-angular
• typescript

Angular CLI関連のファイル追加

ビルド向け

• angular.json
• config/ng-cli/index.html
• config/ng-cli/main.ts
• config/ng-cli/polyfills.ts
• config/ng-cli/tsconfig.app.json

テスト向け

• angular.json
• config/ng-cli/test.ts
• config/ng-cli/polyfills.ts
• config/ng-cli/tsconfig.spec.json

Angular Seed の設定ファイル置き換え

src/client/app/shared/config/env.config.ts は Angular Seed の tools/env/dev.ts 等からAngularSeedでのビルド時に設定を読み込みます。
Angular CLI ではビルドエラーになるのでビルド時に設定ファイルを差し替えます。

"fileReplacements": [
    {
        "replace": "src/client/app/shared/config/env.config.ts",
        "with": "src/client/app/shared/config/env.config.test.ts"
    }
]

参考URL

• Angular Seed: https://github.com/mgechev/angular-seed
• Angular CLI: https://cli.angular.io/