Table of contents
- Guide and given steps how I transferred general code from specific application to Angular library
- Troubleshooting problems when building a library step by step
- The library must be completely independent
- Be careful where you do npm install and what peerDependencies means
- Live library updates
- Error: inject() must be called from an injection context
- Error: Cannot read property 'bindingStartIndex' of null
- AoT compilation problem after first save/code update in specific application
- Link to my Angular library
Guide and given steps how I transferred general code from specific application to Angular library
This document is not for those who are just starting to implement library, if you are just starting see the following Angular guide and come back here, if you still have problems: https://angular.dev/tools/libraries/creating-libraries
Troubleshooting problems when building a library step by step
The library must be completely independent
The library must be completely independent (which you will probably realize is not when you separate the library from the specific application). For some services/methods that I needed in the library, I used three forwarding methods according to the following logic:
I deleted the service and passed the methods, by feeling if I saw that it was simpler.
If the services do not share "state", then I created a new
AbstractService
in the library (it cannot be done in TS using the interface) and wrote the specific logic of the methods in a specific application. After that in theAppModule
I do the following:
- If the services share "state", then I inherited
BaseService
from the library, inside the library I usedBaseService
, while inside the specific applicationService
(e.g. withAuthService
I used this way, because it was important to me that the user data is also in the specific application, i.e. the specific implementation ofBaseService
, withConfigService
I worked like this so that I could set the default configuration in the library, while I couldoverride
it from a specific application). After that in theAppModule
I do the following (note theuseExisting
):
Be careful where you do npm install and what peerDependencies means
Read this document: https://stackoverflow.com/questions/50189589/angular-cli-6-where-to-put-library-dependencies
Live library updates
I created an identical implementation as when referencing an existing project in .NET, for faster changes, I don't think it's wise to build an npm package until the library is stabilized. I advise you to immediately reference the library project from the tsconfig.json
file, not from the package.json
(with file:.../lib-path
). In this way, changes in the library will automatically be reflected on specific projects. I had problems with referencing from package.json
and had to frequently delete node_modules
for the changes to take effect.
Error: inject() must be called from an injection context
I solved this problem by deleting a part from the path list of the specific application:
"@angular/*": ["./node_modules/@angular/*"]
https://github.com/angular/angular/issues/54147
Error: Cannot read property 'bindingStartIndex' of null
Solved by setting projects.{projectName}.architect.build.options.preserveSymlinks
to true
in angular.json
of specific application.
https://github.com/angular/angular/issues/35586#issuecomment-598067833
AoT compilation problem after first save/code update in specific application
Solved by setting projects.{projectName}.architect.build.configurations.development.aot
to false
in angular.json
of specific application.
Link to my Angular library
https://github.com/filiptrivan/spider-framework/tree/main/Angular/projects/spider