当同时运行NG构建 - 观看和NG服务时，Angular 7库HTML-Template更改不会影响应用程序

Question

Angular 7库html-template更改当使用" ng build library -watch-watch"one_answers" ng serve application"中同时运行时，它们在Angular应用程序中不会影响到Angular应用程序。p>所以我首先使用Watch Flag启动库，然后使用NG Serve启动应用程序。库中的更改为TS文件将启动应用程序上的HMR，并正确影响更改。但是，当我更改某些组件时，HTML或CSS文件将检测更改并开始更新应用程序，但UI中未看到更改。如果我停止使用NG并重新开始，那么HTML和CSS更改会影响UI。

我已经检查了更改是否会影响到Dist Directory，但库构建只会输出文件。因此，某种程度上的服务也不会引起他们的注意。

我使用tsconfig.json路径参考库。因为我的应用程序的baseUrl是SRC，所以我需要使用../像这样的配置

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

我在部署路径中使用 @，因为我需要从库中导入SCSS文件。这样，如果我从NPM安装此软件包，则导入路径相同。因此，配置我正在寻找的是使用-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 https://github.com/angular/angular/angular/angular-cli/issues/13588中报道。

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

• 在图书馆项目中的public-api文件夹中添加index.ts，内容为

  export * from './public-api';
  

• 在root 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

  • 在build->配置部分中添加新的配置" dev"

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

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

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

• 使用ng serve -c=dev开始开发模式现在，我不需要启动2 ng进程即可单独观看库和应用程序，也避免运行ng build --watch的问题并不总是拿起一些代码更改＃9572