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

Posted 2023-03-15

【中文标题】当同时运行 ng build --watch 和 ng serve 时，Angular 7 库 html-template 更改不会影响到应用程序

【英文标题】：Angular 7 library html-template changes are not affected into application when concurrently running ng build --watch and ng serve

【发布时间】：2019-07-15 21:36:04

【问题描述】：

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

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

我已经检查了更改会影响到库构建将输出文件的 dist 目录。所以不知何故，即使它注意到它们，ng serve 也不会接受它们。

我使用 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 repo https://github.com/angular/angular-cli/issues/13588 已经报告了这个问题，所以它是 cli 中的错误。

【参考方案1】：

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

在库项目的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 not always picking up some code changes #9572的问题

【讨论】：

如果我有两个库项目，其中一个依赖于另一个，上述解决方案将如何工作？构建时出错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.

实际上，我有超过 1 个库并且它们具有依赖关系。只需将它们全部添加到上面的 tsconfig 文件中。如果我们说 lib-name1，那么您可以从另一个库中的 'lib-name' 导入 xxx。