Create your Standalone Angular Library in 10 minutes

3 Likes

Thanks for this article! We had some doubts about how to add other dependencies than Angular dependencies to our Angular lib’s package.json. After reading through the section “Adding dependencies” the doubts are gone :slight_smile:

But I am not sure I understand why you need to add the peer dependencies as dev dependencies. Is this because you created a library without an Angular app (ng new my-lib --create-application=false)?

In our case, we just added the lib’s peer dependencies to the app’s dependencies (the app we created with the lib: --create-application=true) so they are installed with npm install. Also we build the lib from the project root: ng b --prod my-lib.

I’m glad the article helped you!

You’re right, in the article it is necessary to add peerDependencies also in devDependencies because the library is in its own workspace (with --create-application=false option).

In your case, both the app and the library are in the same workspace. When you build the library, if a peer dependency isn’t in the library node_modules, node will look up in the workspace node_modules which contains your app dependencies.

To sum up, it depends if your app and library share the same angular workspace.

1 Like

Thank you for this great article which was really helpful to me. I have one question about it;

I understand we can reference the library package either by installing it into the application (npm i my-library) or by creating a symlink (especially useful when in development).

However I don’t understand how to switch between both. If I want to use npm when building on my build server, then my library must be referenced as a depencency of my application in the package.json file.

But then if it is in the package.json, it will also be installed from npm when working locally. How do I make sure my app uses the symlink when working locally ? This part is a bit confusing to me, could you please shine some light ? Thank you !

Hi, thanks for your feedback :slight_smile:

Your library should always be referenced in package.json of your app. This makes it possible to build the app without pulling the library repository either in local or CI/CD environment.

When running npm install, you’ll get your library downloaded in node_modules directory. Then, by running npm link in your app folder it’ll be replaced by a symlink.

The key is to check how looks the library into the app node_modules directory.

Thanks for amazing article!

But I got a problem (sound like a bug of Angular Language Service for VSCode). When I link my-lib to root-app, I cannot using custom component in my-lib in component view. I searched and I found this issue: Not a known element when referencing an Angular Component from a library project using npm link · Issue #735 · angular/vscode-ng-language-service · GitHub). The workaround that is restart angular language service after every modify in my-lib. But this workaround not working with me.

Do you have any solution for this?
Thanks again!

Hi!

I reproduced the same issue you found. You did a great job to identify the issue comes from Angular Language Service extension and finding the related issue :+1:

An answer in the issue suggests to disable Ivy but it didn’t work for me :grimacing:. I also tried to enable the experimental Ivy Language Service in VSCode settings but it didn’t work either.

The only workaround I found is to import the library module from the sources. Yet, I don’t recommend this method since you don’t import the library compiled version from dist folder :no_entry_sign:.

import { MyLibModule } from 'projects/my-lib/src/public-api';
1 Like

Thank you, I will try it!