Question

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

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

我检查了更改对dist目录的影响，库构建将在该目录中输出文件。因此，即使注意到了他们，发球也不会带走他们。

我使用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中的错误。

Answer 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

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

1 个答案: