HMR 未使用 Angular CLI 更新视图
HMR is not updating the view with Angular CLI
我最近将我的 angular 应用程序更新到最新版本。经过一夜的 bug 噩梦之后,除了 HMR 之外,我的一切都正常工作了。我非常坚持它。以下是我根据 Angular CLI wiki 上的 HMR 故事进行的配置:
angular.json
"build": {
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"serve": {
"configurations": {
"hmr": {
"hmr": true,
"browserTarget": "appHit:build:hmr"
},
}
},
hmr.js
import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
let ngModule: NgModuleRef<any>;
module.hot.accept();
bootstrap().then(mod => ngModule = mod);
module.hot.dispose(() => {
const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
const elements = appRef.components.map(c => c.location.nativeElement);
const makeVisible = createNewHosts(elements);
ngModule.destroy();
makeVisible();
});
};
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';
if (environment.production) {
enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.hmr) {
if (module[ 'hot' ]) {
hmrBootstrap(module, bootstrap);
} else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
bootstrap().catch(err => console.log(err));
}
我尝试了以下命令:
ng serve --hmr
ng serve --hmr --configuration hmr
ng serve --configuration hmr
一切都会根据更改进行编译,甚至触发的事件也会缓存在浏览器中,但在 HMR 记录以下内容后没有任何反应:
[WDS] App updated. Recompiling...
[WDS] App hot update...
此时我完全迷失了。任何形式的帮助将不胜感激。谢谢
这是我的设置,目前在最新版本下运行良好。如果你不需要 ngrx
东西,你可以去掉它:-)
// main.ts
// ...
import {
bootloader, createInputTransfer, createNewHosts, removeNgStyles
} from '@angularclass/hmr/dist/helpers'; // For correct treeshaking
if (environment.production) {
enableProdMode();
}
type HmrModule<S> = {
appRef: ApplicationRef,
}
type HmrNgrxModule<S, A> = HmrModule<S> & {
store: { dispatch: (A) => any } & Observable<S>,
actionCreator: (s: S) => A
}
const isNgrxModule =
<S, A, M extends HmrNgrxModule<S, A>>(instance: HmrModule<S> | HmrNgrxModule<S, A>)
: instance is M =>
!!((<M>instance).store && (<M>instance).actionCreator);
function processModule<S, A, M extends HmrModule<S> | HmrNgrxModule<S, A>>(ngModuleRef: NgModuleRef<M>) {
const hot = module['hot'];
if (hot) {
hot['accept']();
const instance = ngModuleRef.instance;
const hmrStore = hot['data'];
if (hmrStore) {
hmrStore.rootState
&& isNgrxModule(instance)
&& instance.store.dispatch(instance.actionCreator(hmrStore.rootState));
hmrStore.restoreInputValues && hmrStore.restoreInputValues();
instance.appRef.tick();
Object.keys(hmrStore).forEach(prop => delete hmrStore[prop]);
}
hot['dispose'](hmrStore => {
isNgrxModule(instance) && instance.store.pipe(take(1)).subscribe(s => hmrStore.rootState = s);
const cmpLocation = instance.appRef.components.map(cmp => cmp.location.nativeElement);
const disposeOldHosts = createNewHosts(cmpLocation);
hmrStore.restoreInputValues = createInputTransfer();
removeNgStyles();
ngModuleRef.destroy();
disposeOldHosts();
});
}
else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
return ngModuleRef;
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
const hmrBootstrap = () => bootloader(() => bootstrap().then(processModule));
environment.hmr
? hmrBootstrap()
: bootstrap();
// app.module.ts
// ...
export class AppModule {
constructor(
public appRef: ApplicationRef
// , ...
){}
}
// angular.json
"build": {
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"serve": {
"configurations": {
"hmr": {
"browserTarget": "AppName:build:hmr"
}
}
}
而我 运行 它与 ng serve --hmr -c=hmr
希望对您有所帮助:-)
我们遇到了同样的问题。通过删除与 Webpack 相关的开发依赖项并执行全新的 npm 安装来解决它。
rm -R package-lock.json node_modules
npm cache clean --force
npm i
希望对您有所帮助。
有点晚了...对我有用的是在我的 ClientApp 文件夹中,我有一个包含所有 js 位的 /dist 文件夹...如果有 dist 文件夹,HMR 将无法工作。如果您进行构建,dist 就会到达那里。删除 dist 文件夹,然后 运行 ng serve。在我的例子中,我有一个托管它的 .net 核心应用程序,所以我构建了它并针对我的 angular 应用程序启动...通过修改 html 文件进行测试...应用程序应该在浏览器中重新加载新内容。 .
我认为这可能对某些人有所帮助。我通过更新到 Angular 版本 7 并在 main.ts 中为 HMR
添加以下行解决了我的问题
module['hot'].accept();
如下:
if (environment.hmr) {
if (module['hot']) {
module['hot'].accept();
hmrBootstrap(module, bootstrap);
} else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
console.log('hot');
bootstrap().catch(err => console.log(err));
}
到目前为止,HMR 一直运行良好。我没有时间进一步调试它,但很可能是依赖性不兼容导致了我的结果
我最近将我的 angular 应用程序更新到最新版本。经过一夜的 bug 噩梦之后,除了 HMR 之外,我的一切都正常工作了。我非常坚持它。以下是我根据 Angular CLI wiki 上的 HMR 故事进行的配置:
angular.json
"build": {
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"serve": {
"configurations": {
"hmr": {
"hmr": true,
"browserTarget": "appHit:build:hmr"
},
}
},
hmr.js
import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
let ngModule: NgModuleRef<any>;
module.hot.accept();
bootstrap().then(mod => ngModule = mod);
module.hot.dispose(() => {
const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
const elements = appRef.components.map(c => c.location.nativeElement);
const makeVisible = createNewHosts(elements);
ngModule.destroy();
makeVisible();
});
};
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';
if (environment.production) {
enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.hmr) {
if (module[ 'hot' ]) {
hmrBootstrap(module, bootstrap);
} else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
bootstrap().catch(err => console.log(err));
}
我尝试了以下命令:
ng serve --hmr
ng serve --hmr --configuration hmr
ng serve --configuration hmr
一切都会根据更改进行编译,甚至触发的事件也会缓存在浏览器中,但在 HMR 记录以下内容后没有任何反应:
[WDS] App updated. Recompiling...
[WDS] App hot update...
此时我完全迷失了。任何形式的帮助将不胜感激。谢谢
这是我的设置,目前在最新版本下运行良好。如果你不需要 ngrx
东西,你可以去掉它:-)
// main.ts
// ...
import {
bootloader, createInputTransfer, createNewHosts, removeNgStyles
} from '@angularclass/hmr/dist/helpers'; // For correct treeshaking
if (environment.production) {
enableProdMode();
}
type HmrModule<S> = {
appRef: ApplicationRef,
}
type HmrNgrxModule<S, A> = HmrModule<S> & {
store: { dispatch: (A) => any } & Observable<S>,
actionCreator: (s: S) => A
}
const isNgrxModule =
<S, A, M extends HmrNgrxModule<S, A>>(instance: HmrModule<S> | HmrNgrxModule<S, A>)
: instance is M =>
!!((<M>instance).store && (<M>instance).actionCreator);
function processModule<S, A, M extends HmrModule<S> | HmrNgrxModule<S, A>>(ngModuleRef: NgModuleRef<M>) {
const hot = module['hot'];
if (hot) {
hot['accept']();
const instance = ngModuleRef.instance;
const hmrStore = hot['data'];
if (hmrStore) {
hmrStore.rootState
&& isNgrxModule(instance)
&& instance.store.dispatch(instance.actionCreator(hmrStore.rootState));
hmrStore.restoreInputValues && hmrStore.restoreInputValues();
instance.appRef.tick();
Object.keys(hmrStore).forEach(prop => delete hmrStore[prop]);
}
hot['dispose'](hmrStore => {
isNgrxModule(instance) && instance.store.pipe(take(1)).subscribe(s => hmrStore.rootState = s);
const cmpLocation = instance.appRef.components.map(cmp => cmp.location.nativeElement);
const disposeOldHosts = createNewHosts(cmpLocation);
hmrStore.restoreInputValues = createInputTransfer();
removeNgStyles();
ngModuleRef.destroy();
disposeOldHosts();
});
}
else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
return ngModuleRef;
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
const hmrBootstrap = () => bootloader(() => bootstrap().then(processModule));
environment.hmr
? hmrBootstrap()
: bootstrap();
// app.module.ts
// ...
export class AppModule {
constructor(
public appRef: ApplicationRef
// , ...
){}
}
// angular.json
"build": {
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"serve": {
"configurations": {
"hmr": {
"browserTarget": "AppName:build:hmr"
}
}
}
而我 运行 它与 ng serve --hmr -c=hmr
希望对您有所帮助:-)
我们遇到了同样的问题。通过删除与 Webpack 相关的开发依赖项并执行全新的 npm 安装来解决它。
rm -R package-lock.json node_modules
npm cache clean --force
npm i
希望对您有所帮助。
有点晚了...对我有用的是在我的 ClientApp 文件夹中,我有一个包含所有 js 位的 /dist 文件夹...如果有 dist 文件夹,HMR 将无法工作。如果您进行构建,dist 就会到达那里。删除 dist 文件夹,然后 运行 ng serve。在我的例子中,我有一个托管它的 .net 核心应用程序,所以我构建了它并针对我的 angular 应用程序启动...通过修改 html 文件进行测试...应用程序应该在浏览器中重新加载新内容。 .
我认为这可能对某些人有所帮助。我通过更新到 Angular 版本 7 并在 main.ts 中为 HMR
添加以下行解决了我的问题module['hot'].accept();
如下:
if (environment.hmr) {
if (module['hot']) {
module['hot'].accept();
hmrBootstrap(module, bootstrap);
} else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
console.log('hot');
bootstrap().catch(err => console.log(err));
}
到目前为止,HMR 一直运行良好。我没有时间进一步调试它,但很可能是依赖性不兼容导致了我的结果