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.

Jun · Accepted Answer · 2019-05-07 09:35:54Z

2

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

answered May 7, 2019 at 9:35

Jun

5994 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yogen Darji Over a year ago

How above solution will work if I've two library project with one has dependency on another? getting error while build

error TS6059: File '....projects/shared/src/lib/com-model.component.ts' is not under 'rootDir' '...\projects\users\src'. 'rootDir' is expected to contain all source files.

Jun Over a year ago

Actually, I have more than 1 library and they have dependency. just add all them into the tsconfig files as above. then you can import xxx from 'lib-name' in another library if we said lib-name1.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related