How to make a library in Angular 17

How to make a library in Angular 17

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:

  1. I deleted the service and passed the methods, by feeling if I saw that it was simpler.

  2. 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 the AppModule I do the following:

  1. If the services share "state", then I inherited BaseService from the library, inside the library I used BaseService, while inside the specific application Service (e.g. with AuthService 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 of BaseService, with ConfigService I worked like this so that I could set the default configuration in the library, while I could override it from a specific application). After that in the AppModule I do the following (note the useExisting):

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.

https://github.com/filiptrivan/spider-framework/tree/main/Angular/projects/spider