使用Angular Library来创建通用组件
Angular Library 是什么意思？
-
- Angular CLI v6 から提供された機能で通常の application 作成と異なり library を作ることができる
ref. Library support in Angular CLI 6
优势
-
- Angular は Angular CLI の Multiple Projects を利用するとひとつの repository 内で複数の application を管理できるが library を作ることによりこれらの複数 application で共通に使えるコンポーネント群を作ることができる
- また library をパッケージングすることで npm として公開しなくても別の Angular repository で同じように共通コンポーネントととしても使用可能
试着去做
创建一个应用
- sample-project という名前で Angular repository を作成する(これは library とは別)
$ ng new sample-project
$ cd sample-project
# 起動まで確認する
$ yarn start --open
创建图书馆
-
- my-lib という名前で library project を作成する
-
- shell
-
- $ yarn ng generate library my-lib
sample-project の中に projects/my-lib/ というディレクトリが作られたのが確認できる
构建图书馆
-
- library をビルドする
–watchオプションを付けると変更を監視するようになる(Angular CLI v6.2 以上)
1 回だけビルドしたい場合は不要
$ yarn ng build my-lib --watch
在图书馆项目中创建组件。
-
- ButtonComponent を作成する
repository 内に project が複数あるので –project で対象を指定する必要がある
$ yarn ng g c components/button --project my-lib
-
- ButtonComponent の公開
下記のように export する
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 { }
尝试使用
在同一个代码库的应用中使用图书馆
-
- my-lib で作った ButtonComponent を sample-project で使う
同じ repository 内にある application では library のビルドだけですぐに使うことができる
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]
-
- コンポーネントを表示する
あとはいつもどおりタグを記述するだけでコンポーネントの表示ができる
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>
在另一个仓库中使用
- library のパッケージングが必要なので my-lib のビルド成果物があるディレクトリで下記コマンドを実行
$ 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 でインストールする
$ yarn add ../angular-sample/sample-project/dist/my-lib/my-lib.tgz
- 使い方は同一 repository 内のときと同様
总结
通过使用最新的Angular CLI工具，我发现创建库变得非常容易。虽然这次仅试用了组件，但是也有可能将服务和管道等作为共享库准备好。
以下是参考：
参照或参考资料。
-
- Library support in Angular CLI 6
- The Angular Library Series – Building and Packaging
