即使在更改后也停止浏览器重新加载 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);

每次保存后，结果将是一个不闪烁的更新应用程序。只是不要忘记将其仅用于开发。