2

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

4

1 回答 1

2

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

  • 在库项目的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

    • 在 build -> 配置部分添加新配置“dev”
    "dev": {
    "tsConfig": "src/tsconfig.dev.json"
    }
    • 在 serve -> 配置部分添加新配置“dev”，请将 AppName 重命名为您的项目名称
    "dev": {
    "browserTarget": "AppName:build:dev"
}

  • 使用 Now 启动开发模式，ng serve -c=dev 我不需要启动 2 ng 进程来分别查看库和应用程序，也避免了Runningng build --watch不总是获取一些代码更改的问题 #9572

于 2019-05-07T09:35:54.077 回答