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

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:
-public-api.ts
-test.ts
instead in the second library there are the files:
-projects.ts
-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';

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