同时运行 ng build --watch 和 ngserve 时，Angular 7 库 html 模板更改不会影响应用程序

当 Angular 7 库 html 模板更改使用“ng build library --watch”和“ngserve application”在不同的 cmd 中同时运行时，不会影响 Angular 应用程序。

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

我已经检查过更改会影响库构建将输出文件的 dist 目录。因此，即使 ngserve 注意到它们，也不会接受它们。

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

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

我在部署路径中使用@，因为我需要从库导入scss文件。如果我从 npm 安装这个包，这样导入路径是相同的。因此，我正在寻找的配置是通过使用 --watch 模式来简化库开发。

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 存储库中报告https://github.com/angular/angular-cli/issues/13588 https://github.com/angular/angular-cli/issues/13588所以这是 cli 中的错误。

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

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

  export * from './public-api';
  

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

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

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

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

• 在 tsconifg.app.json 文件夹中添加新的 tsconfig.dev.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

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

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

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

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

• 启动开发模式ng serve -c=dev现在我不需要启动 2 ng 进程来分别观看库和应用程序，也避免了以下问题Running ng build --watch并不总是接受一些代码更改#9572 https://github.com/angular/angular-cli/issues/9572