Angular 7 library html-template changes are not affected into application when concurrently running ng build --watch and ng serve

Question

Angular 7 library html-template changes are not affected into Angular application when they are running concurrently in different cmd using "ng build library --watch" and "ng serve application".

So I first start library with watch flag on, then I start application with ng serve. Changes in library into ts files will start HMR on application and changes are affected correctly. But when I change some components html or css files HMR will detect change and start to update application but changes are not seen in UI. If I stop ng serve and start it again then those html and css changes are affected into UI.

I have checked that changes are affected to dist directory where library build will but output files. So somehow ng serve will not take them even it notice them.

I refer to library using tsconfig.json paths. Because baseUrl for my application is src I need to use ../ in configuration like this

"@lw/common": [
    "../dist/@lw/common"
  ]

I use @ in deploy path because I need to import scss files from library. This way import path is same if I install this package from npm. So configuration what I am looking for is to ease library development by using --watch mode.

dist
    @lw
        common
projects
    lw
        common
src
    app
    index.html

Package versions

Angular CLI: 7.3.1
Node: 10.15.0
OS: win32 x64
Angular: 7.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.1
@angular-devkit/build-angular      0.13.1
@angular-devkit/build-ng-packagr   0.13.1
@angular-devkit/build-optimizer    0.13.1
@angular-devkit/build-webpack      0.13.1
@angular-devkit/core               7.3.1
@angular-devkit/schematics         7.3.1
@angular/cdk                       7.3.2
@angular/cli                       7.3.1
@angular/flex-layout               7.0.0-beta.19
@angular/material                  7.3.2
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.1
@schematics/angular                7.3.1
@schematics/update                 0.13.1
ng-packagr                         4.7.0
rxjs                               6.3.3
typescript                         3.1.3
webpack                            4.29.0

EDIT: This problem was already reported in Angular cli github repo https://github.com/angular/angular-cli/issues/13588 So it is bug in cli.

Answer 1

I met this problem today. After a several hours try, I found a solution in a different way. It's import library code directly in development mode and use the built library when build the app. Here is the steps:

• Add index.ts in the folder of public-api in the library project, content is

  export * from './public-api';
  

• Add paths alias in root tsconfig.json

  "paths": {
    "lib-name": ["projects/lib-name/src"],
    "lib-name/*": ["projects/lib-name/src/*"]
  }
  

• Add paths alias in src\tsconfig.app.json, this config will be used for ng build.

  "paths": {
    "lib-name": ["../dist/lib-name"],
    "lib-name/*": ["../dist/lib-name/*"]
  }
  

• Add new tsconfig.dev.json in the folder of tsconifg.app.json

  {
      "extends": "./tsconfig.app.json",
      "compilerOptions": {
          "baseUrl": "./",
          "paths": {
              "lib-name": ["../projects/lib-name/src"],
              "lib-name/*": ["../projects/lib-name/src/*"]
          }
      },
      "exclude": [
          "test.ts",
          "**/*.spec.ts"
      ],
  }
  

• Update angular.json

  • Add new configuration "dev" in build -> configurations section

  "dev": {
      "tsConfig": "src/tsconfig.dev.json"
      }
  

  • Add new configuration "dev" in serve -> configurations section, please rename the AppName to your project name

  "dev": {
      "browserTarget": "AppName:build:dev"
  }
  

• Start develop mode with ng serve -c=dev Now I don't need to start 2 ng process to watch library and app separately and also avoid the issue of Running ng build --watch not always picking up some code changes #9572