Angular Library 建立与设定

建立angular library

1.建立空专案

ng new app-test-lib --create-application=false --routing false --style css

目录结构
app-test-web
----node_modules
----projects

2.于 projects 下建立library
ng g library app-lib

@Component({  selector: 'lib-app-lib',  template: `    <p>      app-lib works!  OK    </p>  `,  styles: []})export class AppLibComponent implements OnInit {  constructor() { }  ngOnInit(): void {  }}

目录结构
app-test-web
----node_modules
----projects
--------app-lib

3.于 projects 下建立测试 library 的专案
ng g application app-test

app-test-web
----node_modules
----projects
--------app-lib
--------app-test

4.于app-test-web 先 ng build 产生dist
C:\app-test-lib> ng build

5.设定path
(1)于app-test-web 下的 tsconfig.json

增加 "projects/app-lib/src/public-api.ts"

"paths": {  "app-lib": [    "dist/app-lib",    "projects/app-lib/src/public-api.ts"  ]}

(2)src/public-api.ts是设定 library 要 export 的项目

export * from './lib/app-lib.service';export * from './lib/app-lib.component';export * from './lib/app-lib.module';

6.于 app-test 使用 app-lib
于 app.module.ts import AppLibModule,
藉由 "projects/app-lib/src/public-api.ts" 导向到build完的app-lib

import { AppLibModule } from 'app-lib';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    AppRoutingModule,    AppLibModule  ],

7.于app-test测试app-lib专案
(1)将app-test ng serve
C:\app-test-lib> ng serve app-test

(2) build app-lib library专案 并 -- watch
C:\app-test-lib> ng build app-lib --watch

这样 app-lib 只要有更改，可以直接在 app-test 看到结果

**8.于 app.component.html 加上 **
<lib-app-lib></lib-app-lib>

确认结果。

参考连结:
Angular.io :
https://angular.io/guide/creating-libraries
保哥:
https://blog.miniasp.com/post/2019/04/19/Learn-Angular-Library-and-build-custom-Form-Validators