CODEWITHSUNDEEP
angularangular-librarynpm-link
Mike
Mike

Reputation: 725

Angular 10.x library development with npm link doesn't show html/css changes in browser on hot reload

I've created an Angular lib (mylib) using the cli and have created a symlink using npm link from the dist directory.

I've created an Angular app using the cli and have linked the lib using npm link mylib.

I am able to consume mylib from the app and use components, servics, etc. in the application.

After running "ng build --watch" on the lib and "ng serve" on the app, if I make a change to a .ts file in the lib and save, the lib will rebuild and then the app will rebuild and those changes are reflected in the application.

However, if I make a change to an html or scss file in the lib, it will build and and then the app will rebuild but those changes are NOT reflected in the application. The "ng serve" window does show that the vendor.js "chunk" changed but it also says "Warning in Emitted no files." right after. I should add that even if the template/styles are inline (in the ts component file) it will still not reflect those changes either.

When I use chrome dev tools and look at the sources, vendor.js is updated with the latest change to the template and styles args to the component.

The only way I can get the changes to show up is to terminate ng serve and run it again.

Windows 10, Angular 10, NPM 6.14.10, Node 14.15.4

Thanks in advance!

Upvotes: 8

Views: 1340

Answers (1)

Tyler
Tyler

Reputation: 1174

If you update your paths in tsconfig.json it'll pick up the changes. I do not know what effect this has on published builds though. I haven't tested.

I have a lib called "core" and my paths looks like the following.

  "paths": {
    "core": [
      "projects/core/src/core-api",
      "dist/core/core",
      "dist/core"
    ],
},

"core-api" is where I have my components, services, and modules exported. The default name when using the angular cli is "public-api".

Upvotes: 0

Related Questions