关键字说明:

Lib库: 我们要开发的Angular Library库
宿主工程: 用来调试Lib库的工程, 本文中的angular-demo-app就是我们的宿主工程, lib是我们要开发的Lib库

一、创建并且运行angular项目

ng new angular-demo-app
cd angular-demo-app
ng serve --o   (open)

生成文件

二、创建angular library

2.1 生成projects

 ng generate library angular-demo-lib --prefix=lib

执行后会自动生成 projects文件夹 （命令生成后没有html和css 不知道为什么？？）

2.2 设置配置信息

在angular.json 文件中找到library（angular-demo-lib）节点，添加如下配置信息

"configurations": {"production": {"tsConfig": "projects/angular-demo-lib/tsconfig.lib.prod.json","project": "projects/angular-demo-lib/ng-package.prod.json"}

2.3 创建ng-package.prod.json文件

在library名为angular-demo-lib中创建ng-package.prod.json文件 （projects文件下）

1. ng-package.json (ng library 自动生成的文件）
2. ng-package.prod.json （手动创建的）

{"$schema": "../../node_modules/ng-packagr/ng-package.schema.json","dest": "../../dist/angular-demo-lib","lib": {"entryFile": "src/public-api.ts"}
}

三、开发 Lib库及打包 Lib库

3.1 开发lib库

1. 新建 html和css （本文在ts中写html）

2. 在projects/src下新建assets和theme文件
   

3. 代码
   3.1 theme/library.theme.css (全局样式）

   .lib-color {color: #0f0 !important;
   }
   

   3.2 静态资源 assets/angular.jpg
   3.3 angular-demo-lib.component.css

   body {background-color: #dddddd;
   }
   .lib-color {color: #f00;
   }
   

   3.4 app.module.ts 引用lib模块 （AngularDemoLibModule）

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { AngularDemoLibModule } from 'projects/angular-demo-lib/src/public-api';@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,AngularDemoLibModule],providers: [],bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   3.5 app.component.html引用lib库的组件

   <h1>ng library learn</h1><lib-angular-demo-lib></lib-angular-demo-lib>
   

4. 运行结果
   

3.2 打包lib库

设置build命令：

 "scripts": {"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e",// 1. 编译Lib库// 说明: angular-demo-lib是你的Lib库的名字// 编译的结果会放到dist/angular-demo-lib目录下(在ng-package.json文件中配置)"build_lib": "ng build --prod angular-demo-lib",// 2. 将编译之后的Lib库打包// 说明: `npm pack`会将你编译之后的代码打包成.tgz文件"npm_pack": "cd dist/angular-demo-lib && npm pack",// 3. 在宿主工程中安装刚刚打包好的Lib库// 说明: 宿主工程作为测试用的工程, 本地安装刚打包好的Lib库即可"npm_install": "npm i ./dist/my-lib/my-lib-0.0.1.tgz",// 整合之后的命令"package": "npm run build_lib && npm run npm_pack && npm run npm_install"},

ng build --prod angular-demo-lib (npm run build_lib)

ng build 后生成如下：

注：全局样式和图片并未引用成功！！！

重要的一步: 在angular.json文件中增加以下内容, 让宿主工程可以使用Lib库中的资源文件和全局样式(设置build时引用）

执行以下命令打包成tgz文件

可以配置命令"npm_pack": “cd dist/angular-demo-lib && npm pack” （npm run npm_pack)

“npm_install”: “npm i ./dist/angular-demo-lib/angular-demo-lib-0.0.1.tgz” (npm run npm_install)
node_modules下安装了angular-demo-lib-0.0.1库 但是node_modules/angular-demo-lib中未有assets和theme文件？？？

四、测试并使用 Lib库

  // 整合之后的命令"package": "npm run build_lib && npm run npm_pack && npm run npm_install"

最后执行 npm run package 使用库

五、参考学习地址

简书快速开发一个Library
使用Library
创建Li brary
gitHub地址