即使在更改后也停止浏览器重新加载angular4应用程序

Question

当我们在实时angular4应用程序中进行更改时，是否有任何方法可以阻止浏览器重新加载。 基本上我正在寻找的是 - 当你在angular4应用程序中进行更改时，浏览器应该在不重新加载的情况下呈现这些更改。因此，最终用户可以在不重新加载页面的情况下查看更改。 此外，我们每次进行任何更改时都必须构建应用程序吗？有没有办法不构建它并获得在DOM上呈现的更改。

Answer 1

有一种叫做angular-hmr的特殊工具。你可以在这个链接找到它 -  https://www.npmjs.com/package/@angularclass/hmr

安装后，您可以在main.ts中编写此代码：

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();
     });
   };
  hmrBootstrap(module, bootstrap);

这应该取代你的

platformBrowserDynamic().bootstrapModule(AppModule);

每次保存后，结果将是一个非闪烁的更新应用程序。别忘了只用它来开发。