在同一个角度工作区中可以有多少个库？

问题描述

我可以在同一个 Angular 工作区中拥有多个库吗？ 例如：

lib-shared/
    projects/
          lib1
          lib2
          lib3

我尝试在我的工作空间中创建第二个库并将其导入我的应用程序，但出现以下错误：

    core.js:4442 ERROR TypeError: Cannot read property 'bindingStartIndex' of null
    at ɵɵelementStart (core.js:14822)
    at LsLibHeadToolbarComponent_Template (template.html:1)
    at executeTemplate (core.js:7457)
    at renderView (core.js:7264)
    at renderComponent (core.js:8520)
    at renderChildComponents (core.js:7138)
    at renderView (core.js:7289)
    at renderComponent (core.js:8520)
    at renderChildComponents (core.js:7138)
    at renderView (core.js:7289)

我注意到一个奇怪的事情：在我在 src 文件夹中创建（工作）的第一个库中有文件：

1. -public-api.ts
2. -test.ts

取而代之的是在第二个库中有文件：

1. -projects.ts
2. -test.ts

这是我的工作区 angular.json：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
    "ls-lib-menu": {
      "projectType": "library","root": "projects/ls-lib-menu","sourceRoot": "projects/ls-lib-menu/src","prefix": "ls-lib-menu","architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build","options": {
            "tsConfig": "projects/ls-lib-menu/tsconfig.lib.json","project": "projects/ls-lib-menu/ng-package.json"
          },"configurations": {
            "production": {
              "tsConfig": "projects/ls-lib-menu/tsconfig.lib.prod.json"
            }
          }
        },"test": {
          "builder": "@angular-devkit/build-angular:karma","options": {
            "main": "projects/ls-lib-menu/src/test.ts","tsConfig": "projects/ls-lib-menu/tsconfig.spec.json","karmaConfig": "projects/ls-lib-menu/karma.conf.js"
          }
        },"lint": {
          "builder": "@angular-devkit/build-angular:tslint","options": {
            "tsConfig": [
              "projects/ls-lib-menu/tsconfig.lib.json","projects/ls-lib-menu/tsconfig.spec.json"
            ],"exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },"ls-lib-head-toolbar": {
      "projectType": "library","root": "projects/ls-lib-head-toolbar","sourceRoot": "projects/ls-lib-head-toolbar/src","prefix": "ls-lib-head-toolbar","options": {
            "tsConfig": "projects/ls-lib-head-toolbar/tsconfig.lib.json","project": "projects/ls-lib-head-toolbar/ng-package.json"
          },"configurations": {
            "production": {
              "tsConfig": "projects/ls-lib-head-toolbar/tsconfig.lib.prod.json"
            }
          }
        },"options": {
            "main": "projects/ls-lib-head-toolbar/src/test.ts","tsConfig": "projects/ls-lib-head-toolbar/tsconfig.spec.json","karmaConfig": "projects/ls-lib-head-toolbar/karma.conf.js"
          }
        },"options": {
            "tsConfig": [
              "projects/ls-lib-head-toolbar/tsconfig.lib.json","projects/ls-lib-head-toolbar/tsconfig.spec.json"
            ],"exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },"defaultProject": "ls-lib-menu","cli": {
    "analytics": false
  }
}

我将两个库都导入到 app.module.ts 文件中：

import { LsLibMenuModule } from '../../../../../ls-lib-shared/projects/ls-lib-menu/src/public-api';
import { LsLibHeadToolbarModule } from '../../../../../ls-lib-shared/projects/ls-lib-head-toolbar/src/projects';

解决方法

是的，您可以拥有任意数量的。只需确保将它们添加到 angular.json，但如果您使用 angular-CLI 生成库，这将自动完成。

https://angular.io/guide/creating-libraries