hot-reloadng-buildnpm-linkangular18

Issue with ng build --watch and npm link in Angular 18


I’m working on an Angular project that uses an Angular library. I recently upgraded both from version 17 to 18. In version 17, I was using ng build --watch along with npm link to enable hot reload for both my project and the library during development.

However, since upgrading to version 18, this process no longer works. Both projects compile successfully, and the library is correctly used by the project, but changes made in the library are no longer detected by the project.

I understand that Angular 18 introduced some changes to the build process, but I haven’t been able to find how to configure it for this use case. Do you have a solution for this?

You can reproduce it by creating a new projects including a library

ng new project
ng new my-workspace --no-create-application
cd my-workspace
ng generate library my-lib
cd projects\my-lib
ng build --watch

then when the library is built

npm link // In the library dist folder
npm link my-lib // In the project folder
npm start

Solution

  • You can change the prebundle option for the development server in the angular.json file in order to handle this case.

    Example:

    "serve": {
      "configurations": {
        "development": {
          "prebundle": {
            "exclude": ["@myorg/my-ngx-library"]
          }
        }
      }
    }