path - How many libraries can i have in the same angular workspace?

Question

Can I have more than one library in the same angular workspace? For Example:

lib-shared/
    projects/
          lib1
          lib2
          lib3

I tried to create a second library in my worskspace and import it into my app getting the following errors:

    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)

I noticed a strange thing: in the first library I created (working) in the src folder there are the files:

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

instead in the second library there are the files:

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

this is my angular.json of workspace:

{
  "$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",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "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"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "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"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "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
  }
}

I imported both libraries into the app.module.ts file:

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';

question from:https://stackoverflow.com/questions/65920147/how-many-libraries-can-i-have-in-the-same-angular-workspace

Answer 1

Yes, you can have as many as you want. Just make sure you add them to the angular.json, but if you generate the library with the angular-CLI this will be done automatically.

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