同时运行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
问题描述
当使用 ng build library --watch和 ng serve application在不同cmd中同时运行Angular 7库html-template更改时,它们不会影响Angular应用程序。
Angular 7 library html-template changes are not affected into Angular application when they are running concurrently in different cmd using "ng build library --watch" and "ng serve application".
因此,我首先启动带有watch标志的库,然后使用ng serve启动应用程序。将库更改为ts文件将在应用程序上启动HMR,并且更改会受到正确影响。但是,当我更改某些组件html或css文件时,HMR将检测到更改并开始更新应用程序,但是在UI中看不到更改。如果我停止ng serve并重新启动它,那么这些html和css的更改将影响到UI。
So I first start library with watch flag on, then I start application with ng serve. Changes in library into ts files will start HMR on application and changes are affected correctly. But when I change some components html or css files HMR will detect change and start to update application but changes are not seen in UI. If I stop ng serve and start it again then those html and css changes are affected into UI.
我已经检查了更改是否影响到dist目录,在该目录中,库构建将但是输出文件。因此,即使注意到它们,以某种方式也不会带走它们。
I have checked that changes are affected to dist directory where library build will but output files. So somehow ng serve will not take them even it notice them.
我使用tsconfig.json路径引用库。因为我的应用程序的baseUrl是src,所以我需要在这样的配置中使用../
I refer to library using tsconfig.json paths. Because baseUrl for my application is src I need to use ../ in configuration like this
"@lw/common": [
"../dist/@lw/common"
]
I在部署路径中使用@,因为我需要从库中导入scss文件。如果我从npm安装此软件包,则这种导入路径是相同的。因此,我要配置的是使用--watch模式简化库开发。
I use @ in deploy path because I need to import scss files from library. This way import path is same if I install this package from npm. So configuration what I am looking for is to ease library development by using --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-cli/issues/13588 这是cli中的错误。
This problem was already reported in Angular cli github repo https://github.com/angular/angular-cli/issues/13588 So it is bug in cli.
推荐答案
我今天遇到了这个问题。经过几个小时的尝试,我找到了另一种解决方案。它直接在开发模式下导入库代码,并在构建应用程序时使用构建的库。
步骤如下:
I met this problem today. After a several hours try, I found a solution in a different way. It's import library code directly in development mode and use the built library when build the app. Here is the steps:
-
在库项目的public-api文件夹中添加index.ts,内容是
Add index.ts in the folder of public-api in the library project, content is
export * from './public-api';
在根tsconfig.json中添加路径别名
Add paths alias in root tsconfig.json
"paths": {
"lib-name": ["projects/lib-name/src"],
"lib-name/*": ["projects/lib-name/src/*"]
}
在src\tsconfig.app.json中添加路径别名,此配置将用于 ng构建
。
"paths": {
"lib-name": ["../dist/lib-name"],
"lib-name/*": ["../dist/lib-name/*"]
}
在tsconifg.app.json文件夹中添加新的tsconfig.dev.json
Add new tsconfig.dev.json in the folder of tsconifg.app.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
Update angular.json
- 在构建->配置部分添加新配置 dev
"dev": {
"tsConfig": "src/tsconfig.dev.json"
}
- 在服务中添加新配置 dev->配置部分,请将AppName重命名为您的项目名称
"dev": {
"browserTarget": "AppName:build:dev"
}
使用 ng serve -c = dev
开始开发模式现在,我不需要启动2 ng进程来分别监视库和应用程序,并且还避免了运行 ng build --watch
不总是要进行一些代码更改#9572
Start develop mode with ng serve -c=dev
Now I don't need to start 2 ng process to watch library and app separately and also avoid the issue of Running ng build --watch
not always picking up some code changes #9572
这篇关于同时运行ng build --watch和ng serve时,Angular 7库的html-template更改不会影响到应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!