Angular 自己的Library

ng new projectName 创建一个新的项目

ng g library libraryName --prefix xxx #libraryNamelib库名称 #xxx : 组件前缀(如 nz-zorro 的组件前都是 nz-xxx)

在宿主工程的package.json的scripts中加入以下几个命令: 可以自己拓展命令

"scripts": {
 ...
 // 1. 编译Lib库
 // 说明: my-lib是你的Lib库的名字
 // 编译的结果会放到dist/libraryName目录下(在ng-package.json文件中配置)
 "build_lib": "ng build libraryName",
 // 2. 将编译之后的Lib库打包
 // 说明: `npm pack`会将你编译之后的代码打包成.tgz文件
 "npm_pack": "cd dist/libraryName && npm pack",
 // 3. 在宿主工程中安装刚刚打包好的Lib库
 // 说明: 宿主工程作为测试用的工程, 本地安装刚打包好的Lib库即可
 "npm_install": "npm i ./dist/libraryName/libraryName-0.0.1.tgz",
 //lib库中静态资源丢失 ：可以在主程序的package.json 文件中加入一条命令：
// 说明: 将assets目录从Lib库中copy到dist/xxx中 (环境系统不同,命令不同)
 "copy_assets_win": "xcopy projects\\au-ui\\src\\assets dist\\au-ui\\assets\\ /s/y", 
 "copy_assets_linux": "cp -rf projects/my-lib/src/assets dist/my-lib/assets",
 //4. 整合之后的命令: 最终只需要执行这一个命令即可
 // 说明: 每次Lib库有修改, 都需要重新执行这个命令
 "package": "npm run build_lib && copy_assets_win && npm run npm_pack && npm run npm_install"
 ...
}

在宿主根目录下执行npm run package, 此时会打包Lib库, 并安装到宿主工程中
在宿主工程的app.module.ts中引入Lib库(import { xxxModule } from 'xxx'),导入模块后并在app.component.html中使用模块里的组件
angular.json文件中增加以下内容, 让宿主工程可以使用Lib库中的静态资源文件和全局样式

"assets": [
      "src/favicon.ico",
      "src/assets",
      {
          "glob": "**/*",
          "input": "node_modules/xxx/assets",  //这样就可以使用它的资源
          "output": "assets"
      }
],
"styles": [
        "src/styles.scss",
        "node_modules/xxx/theme/style.scss" //映入主题css
  ],

****** 注意:

lib 每加一个组件要在库的 public-api 下进行export 否则打包好的lib不能使用该组件,组件进行更新或添加,要再次执行npm run package来更新项目内的应用

lib默认样式文件好像是 .css,所以可以在全局 angular.json下Lib自己库属性添加:
projects{
 "lib-xxx": {
   "schematics": {
       "@schematics/angular:component": {
         "style": "scss"
     }
    }
  }
}