[Pro Tip] `npm link` explained 馃帀

Bartosz Pietrucha - Sep 23 '19 - - Dev Community

It's time for another Angular Knowledge Pill!
It takes just a couple of seconds to learn something new 馃敟
Like taking your morning vitamins 馃槂

If you are working on a library that you want to import to your application you don't have to publish it to any npm repository! You can link it locally. Imagine you develop an Angular library or maybe you have your CSS theme in a separate npm package that you want to import to your application locally. You can use npm link command like below. 馃槑

Alt Text

npm link creates a symbolic link (symlink) from your <global node_modules> directory to the local library鈥檚 directory.

npm link <library-name> creates a symbolic link from project's local node modules directory ./node_modules/<library_name> to <global_node_modules>/<library_name>.

To locate your <global node_modules> directory, type npm root -g in the command line.

Now, you can import your library directly in your application like below. But, there is a catch! 馃槺

Alt Text

The catch is that you need one more change in your angular.json file! You need to add a property preserveSymlinks as presented below. And that's it! You can run your application with the local dependency! 馃敟

Alt Text


If you would like to receive this kind of knowledge pills directly into your mailbox, subscribe at angular-academy.com/blog/. I will be sending them regularly! Remember, it just takes 10 seconds to learn something new! 馃槂

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .