- 開発技術
Angular Library について
- #DevTools
目次
Angular Library とは
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
Angular ライブラリは、単独では実行できないという点でアプリケーションとは異なる Angularプロジェクトで、 ライブラリをインポートしてアプリケーションで使用する必要がある。Angular CLI v6 から提供された機能で通常の application 作成と異なり library を作ることができる
-
Angular は Angular CLI の Multiple Projects を利用するとひとつの repository 内で複数の application を管理できるが library を作ることによりこれらの複数 application で共通に使えるコンポーネント群を作ることができる
-
また library をパッケージングすることで npm として公開しなくても別の Angular repository で同じように共通コンポーネントととしても使用可能
共通コンポーネント作成
application を作成
-
sampleproという名前で Angular repository を作成する
|
1 2 3 |
$ ng new samplepro $ cd samplepro $ yarn start --open |
library を作成
-
my-lib という名前で library project を作成する
shell $ yarn ng generate library my-lib -
sampleproの中に projects/my-lib/ というディレクトリが作られたのが確認できる
library をビルド
-
library をビルドする
-
--watchオプションを付けると変更を監視するようになる(Angular CLI v6.2 以上) -
1 回だけビルドしたい場合は不要
-
|
1 |
1$ yarn ng build my-lib --watch |
library project でコンポーネントを作成
-
ButtonComponent を作成する
-
repository 内に project が複数あるので
--projectで対象を指定する必要があ
-
|
1 |
1$ yarn ng g c components/button --project my-lib |
-
ButtonComponent の公開
-
下記のように export する
-
|
1 2 3 4 5 6 7 8 9 10 11 12 |
diff --git a/projects/my-lib/src/lib/my-lib.module.ts b/projects/my-lib/src/lib/my-lib.module.ts index 1737e01..384bef0 100644 --- a/projects/my-lib/src/lib/my-lib.module.ts +++ b/projects/my-lib/src/lib/my-lib.module.ts @@ -6,6 +6,6 @@ import { ButtonComponent } from './components/button/button.component'; declarations: [MyLibComponent, ButtonComponent], imports: [ ], - exports: [MyLibComponent] + exports: [MyLibComponent, ButtonComponent] }) export class MyLibModule { } |
library を同一 repository の application で使う
-
my-lib で作った ButtonComponent を samplepro で使う
-
同じ repository 内にある application では library のビルドだけですぐに使うことができる
-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..f95347c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,8 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { MyLibModule } from 'my-lib'; + import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -10,7 +12,8 @@ import { AppComponent } from './app.component'; ], imports: [ BrowserModule, AppRoutingModule, + MyLibModule, ], providers: [], bootstrap: [AppComponent] |
-
コンポーネントを表示する
-
あとはいつもどおりタグを記述するだけでコンポーネントの表示ができる
-
|
1 2 3 4 5 6 7 8 9 10 |
diff --git a/src/app/app.component.html b/src/app/app.component.html index 0f3d9d8..0e56a2e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -17,5 +17,6 @@ <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> </li> </ul> +<lib-button></lib-button> <router-outlet></router-outlet> |
別の repository で使う
-
library のパッケージングが必要なので my-lib のビルド成果物があるディレクトリで下記コマンドを実行
|
1 2 3 |
$ cd dist/my-lib $ yarn pack # my-lib-v0.0.1.tgz ができる |
-
my-lib-v0.0.1.tgz ができる
-
もし名前を変えたければ
$ yarn pack --filename my-lib.tgzのようにする -
パッケージングした library を任意の application でインストールする
|
1 |
1$ yarn add ../angular-sample/samplepro/dist/my-lib/my-lib.tgz |
-
使い方は同一 repository 内のときと同様
まとめ
Angular CLI を使って、 library が簡単に作成できた。
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
