How to Update and Test Your Angular Library Components

5 min readOct 30, 2024

A Post to Remind You of the Steps for Updating and Testing Your Components in Your Main Project

TL;DR

This post includes steps for updating your Angular library components and testing them in your own project before publishing to npm as a new version. You can use it as a reminder post (since I always need to look up not to skip any steps 😊) for future updates (such as for Angular version upgrades) as well.

In your client library project

This is a sample library project’s folder hierarchy:

A Typical Angular Library Project Folder Structure

First of all, make sure you incremented your library component’s version number in its own project’s (that exists under projects folder of the container library project) package.json.

your client library project — package.json

Navigate to the root folder of your main project folder in your terminal and run the command below, if you are not going to make any further changes (if not, skip this command):

ng build --project YOUR_LIBRARY_COMPONENT_NAME

YOUR_LIBRARY_COMPONENT_NAME must be the value of “name” property that you have in your library component project’s own package.json as in the screenshot above.

If you are likely to make more changes in your library component and try them out in your application project, you should run the command below for the changes to apply without having to apply all the steps from the beginning:

ng build YOUR_LIBRARY_COMPONENT_NAME --configuration development --watch

Do not cancel this command; it will keep running to watch for your changes.

your client library project — build with watch

After a successful build, the “dist” folder path of your library component is printed as an output (path of “to” ) as above. Copy the path value. Open another terminal or split your terminal (bash) if you are using vscode. In your newly opened terminal, paste the copied path to navigate to the dist folder.

cd /your-frontend-libraries/dist/your-library-component

Now you should run the command below:

npm link

With “npm link” — which symlinks a package folder, you are ready to install your library component locally via npm in your application project. You can read more about the command here.

In your application project

Now switch to your application project and open its angular.json file. Under projects > architect > build > options, paste the property below directly (its order is not important, you can paste it as the first item so you can easily find it to delete after you are done):

"preserveSymlinks": true,

preserveSymlink will now allow us to use our symlinked (which we did with npm link) library component.

Now you are ready to install your component to your application project:

npm link YOUR_LIBRARY_COMPONENT_NAME

Navigate to your application project’s node_modules folder and find your library. You will see a little icon next to the folder to show it has been symlinked. Expand it and open package.json file there to check if the version value is equal to your new version.

your application project — node_modules directory

You can now run your application to see the changes and test your library component within your application.

Cleanup

In your application project:

Do not forget to remove “preserveSymlinks” config added to package.json.

Unlink your library dependency. Be careful, this will also remove the dependency from package.json and node_modules directory.

npm unlink YOUR_LIBRARY_COMPONENT_NAME

In your client library project:

Navigate to your library’s dist folder if you are not currently there:

cd /your-frontend-libraries/dist/your-library-component

Apply unlink to your library so that it is not available to re-link again.

npm unlink YOUR_LIBRARY_COMPONENT_NAME

*your client library project — npm unlink*

Cancel (cmd + c) the running command in your terminal if you had run the build command with options “ — configuration development — watch”

Publish Your Library

In your client library project:

If your library component is ready to get published, run the command below for a final clean build:

ng build --project YOUR_LIBRARY_COMPONENT_NAME

Navigate to the dist path (path of “to” in the command output)

cd /your-frontend-libraries/dist/your-library-component

Run npm publish:

npm publish

*your client library project — npm publish*

In your application project:

Since unlink command has removed your library dependency from your application project, you are ready to install it with its new version:

npm i YOUR_LIBRARY_COMPONENT_NAME@LATEST_VERSION

Happy Coding!

References:
https://medium.com/@aleksanderkolata/how-to-develop-angular-libraries-locally-ed8e1fd16892
https://medium.com/@joosep.parts/create-an-angular-14-library-use-it-locally-when-developing-and-publish-the-package-to-npm-689ca2efdea8
https://stackoverflow.com/questions/65853612/install-angular-library-from-local-folder-or-network-folder