同时运行ng build --watch和ng serve时，Angular 7库的html-template更改不会影响到应用程序

问题描述

当使用 ng build library --watch和 ng serve application在不同cmd中同时运行Angular 7库html-template更改时，它们不会影响Angular应用程序。

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".

因此，我首先启动带有watch标志的库，然后使用ng serve启动应用程序。将库更改为ts文件将在应用程序上启动HMR，并且更改会受到正确影响。但是，当我更改某些组件html或css文件时，HMR将检测到更改并开始更新应用程序，但是在UI中看不到更改。如果我停止ng serve并重新启动它，那么这些html和css的更改将影响到UI。

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.

我已经检查了更改是否影响到dist目录，在该目录中，库构建将但是输出文件。因此，即使注意到它们，以某种方式也不会带走它们。

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.

我使用tsconfig.json路径引用库。因为我的应用程序的baseUrl是src，所以我需要在这样的配置中使用../

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在部署路径中使用@，因为我需要从库中导入scss文件。如果我从npm安装此软件包，则这种导入路径是相同的。因此，我要配置的是使用--watch模式简化库开发。

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

软件包版本

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

编辑：Angular cli github repo 这是cli中的错误。

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

推荐答案

我今天遇到了这个问题。经过几个小时的尝试，我找到了另一种解决方案。它直接在开发模式下导入库代码，并在构建应用程序时使用构建的库。
步骤如下：

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:

• 在库项目的public-api文件夹中添加index.ts，内容是

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

export * from './public-api';

在根tsconfig.json中添加路径别名

Add paths alias in root tsconfig.json

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

在src\tsconfig.app.json中添加路径别名，此配置将用于 ng构建。

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

在tsconifg.app.json文件夹中添加新的tsconfig.dev.json

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"
    ],
}

更新angular.json

Update angular.json

• 在构建->配置部分添加新配置 dev

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

• 在服务中添加新配置 dev->配置部分，请将AppName重命名为您的项目名称



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




• 使用 ng serve -c = dev
  开始开发模式现在，我不需要启动2 ng进程来分别监视库和应用程序，并且还避免了

• Start develop mode with ng serve -c=devNow 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

  这篇关于同时运行ng build --watch和ng serve时，Angular 7库的html-template更改不会影响到应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！