Angular CLIでマルチプロジェクトのアプリケーション雛形を作る
Posted on January 31, 2020 at 21:00 (JST)
Angular cliでマルチプロジェクトのアプリケーション雛形を作る方法をメモとして残す。
今回作成したコード: angular-storyshots-sample/multiple-projects-app
動作環境
OS: macOS Mojave ver. 10.14.6
Node: v12.14.0
@angular/cli: 9.0.0-rc.10
CLIで雛形作成
今回の記事では下記のようなマルチプロジェクト構成のアプリケーションを作成する手順を説明する。
adminは管理画面、customerは一般ユーザー向け画面、commonは２つの画面（アプリケーション）から利用するUIパーツやサービスなどのモジュールを管理するライブラリを想定している。
.
├── angular.json
├── package.json
├── projects
│ ├── admin
│ ├── common
│ └── customer
├── tsconfig.json
└── tslint.json
1. ルートディレクトリと共通ファイルを作成
下記コマンドで生成する。
--createApplication=falseオプションをつけるのがポイント。
$ ng new multiple-projects-app \
--createApplication=false \
--interactive=false \
--strict
作られるファイルは下記の通り
CREATE multiple-projects-app/README.md (1042 bytes)
CREATE multiple-projects-app/.editorconfig (246 bytes)
CREATE multiple-projects-app/.gitignore (631 bytes)
CREATE multiple-projects-app/angular.json (137 bytes)
CREATE multiple-projects-app/package.json (1305 bytes)
CREATE multiple-projects-app/tsconfig.json (717 bytes)
CREATE multiple-projects-app/tslint.json (1761 bytes)
2. アプリケーションとライブラリ用のコードを追加
ng gコマンドでapplication(customer, admin)とlibrary(common)をprojects下に追加する。
$ cd multiple-projects-app
$ ng g application customer \
--style=scss \
--routing=true
$ ng g application admin \
--style=scss \
--routing=true
$ ng g library common
※ libraryには--styleオプションが付けられないため、UIコンポーネントを用意する際には都度指定する必要がある。
便利設定
ポート衝突回避設定をする
何も指定しないとadmin/customerともにng serveに4200番ポートを使用として、いずれかが起動に失敗する。
起動引数にて明示的にポートを指定するか、angular.jsonに設定を追加することで衝突を回避できる。
今回はangular.jsonにadminを4201ポートで起動させる設定を追加する。
angular.jsonのprojects.admin.architect.serve.optionsに"port": 4201を追加。
"options": {
"browserTarget": "admin:build",
"port": 4201
},
npmのscripts追加
admin/customerアプリケーションそれぞれ個別にstart/build出来るようにするため、--projectオプションを追加したscriptを用意する。
また、両方同時にstart/build出来るよう既存のscriptを変更する。
※ --projectオプションを指定しない場合はangular.jsonのdefaultProjectに指定されているアプリケーションが対象となる。
"start": "npm run start:admin & npm run start:customre",
"start:admin": "ng serve --project=admin",
"start:customre": "ng serve --project=customer",
"build": "npm run build:admin && npm run build:customre",
"build:admin": "ng build --project=admin",
"build:customre": "ng build --project=customer",
おまけ（コンポーネント追加）
libraryにUIコンポーネントを追加し、admin/customerにて使用する。
1. libraryにUIコンポーネントを追加
下記コマンドを実行し、common project に Notification コンポーネントを追加する。
$ ng g module elements/notification --project=common
$ ng g component elements/notification \
--project=common \
--style=scss \
--module=elements/notification \
--export=true
notification.component.ts, notification.component.html, notification.component.scssを実装する。参照：Github変更履歴
2. アプリケーションから利用する
customer/adminアプリケーションに Home コンポーネントを追加し、その中でNotificationを使用する。
下記コマンドを実行し、Homeコンポーネントを追加する。
$ ng g component components/home \
--project=customer
$ ng g component components/home \
--project=admin
router設定やmoduleのインポート、Homeコンポーネントの実装等を行う。参照：Github変更履歴
テストを修正。参照：Github変更履歴
以上。