アレについて記す

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は2つの画面(アプリケーション)から利用する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変更履歴


以上。


参考URL