NPM Link Internals

If we read the npm link documentation. We may not fully understand what it's saying.

npm link allows us to develop a library while using it's contents immediately in a consumer application. We are bypassing npm publish and npm install.

npm link

npm link is done in the library dist folder being developed as an npm package.

Afterward, the relationship is shown in the output window.

C:\Users\CurrentUser\AppData\Roaming\npm\node_modules\mslcc -> 
    D:\OtherFolder\Web\UI\CommonComponents\dist\msl

If we then go to the consumer side and type in npm link linkname we see this..

PS D:\Source\Workspace> npm link mslcc

D:\Source\Workspace\node_modules\mslcc -> 
C:\Users\UserName\AppData\Roaming\npm\node_modules\mslcc -> 
D:\Source\Main\Web\UI\CommonComponents\dist\msl

It linked the workspace node_modules\mslcc from the global cache of same name which originated from our library!

Import into local app.module.ts

Over on the consumer side...

We learned a new trick here, by simply using node_modules instead of the full path to that folder, we found that Typescript knew to progress upwards in the folders until it found the first node_modules folder! Cool didn't know that.

Advantages

We bypass npm publish and npm install. We can change our library, save and compile. The consumer application picks up the changes instantly.

JWP 2020 NPM Link and it's use in Libraries