.Net Core Angular 4 - 捆绑包重建时重复的应用程序组件
.Net Core Angular 4 - Duplicate app component on bundle rebuilding
我的项目正在使用 Visual Studio .Net-Core AngularJS 模板(即使用 app.module.shared.ts
、app.module.browser.ts
、app.module.server.ts
文件)
我遇到了一个奇怪的问题,每当我进行更改时,新的 <app>
元素都会添加到我的 DOM 中,而旧的 <app>
元素不会被删除。
如果我刷新页面,一切都会恢复正常。
经过大量搜索后发现这是因为我的 app.module.browser.ts
文件中有这个
imports: [
BrowserModule,
BrowserAnimationsModule,
AppModuleShared
],
删除 BrowserAnimationsModule 行后,重复问题就停止了。
所以导入部分变为:
imports: [
BrowserModule,
AppModuleShared
],
我不知道这是 webpack 问题、angular 问题,还是 MS 将 app.module 拆分为多个文件的方式的问题...但这就是造成这种情况的原因如果你 运行 进入这个问题!
感兴趣的人可以轻松复制,只需启动一个新的模板项目并添加该行即可。
更新:将 BrowserAnimationsModule
导入添加到 app.module.shared.ts
文件也有同样的问题,NoopAnimationsModule
也是如此
更新 2:
我刚刚发现这个 GIT 问题有一个适当的解决方法来删除旧的 <app>
https://github.com/aspnet/JavaScriptServices/issues/1165
我的解决方法是更新 boot.browser.ts
文件以包含 oldRootElem!.remove();
:
import 'reflect-metadata';
import 'zone.js';
import 'bootstrap';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.browser.module';
if (module.hot) {
module.hot.accept();
module.hot.dispose(() => {
// Before restarting the app, we create a new root element and dispose the old one
const oldRootElem = document.querySelector('app');
const newRootElem = document.createElement('app');
oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
oldRootElem!.remove();
modulePromise.then(appModule => appModule.destroy());
});
} else {
enableProdMode();
}
// Note: @ng-tools/webpack looks for the following expression when performing production
// builds. Don't change how this line looks, otherwise you may break tree-shaking.
const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);
这样您仍然可以包含 BrowserAnimationsModule
(请参阅 @James 的回答)。
我的项目正在使用 Visual Studio .Net-Core AngularJS 模板(即使用 app.module.shared.ts
、app.module.browser.ts
、app.module.server.ts
文件)
我遇到了一个奇怪的问题,每当我进行更改时,新的 <app>
元素都会添加到我的 DOM 中,而旧的 <app>
元素不会被删除。
如果我刷新页面,一切都会恢复正常。
经过大量搜索后发现这是因为我的 app.module.browser.ts
文件中有这个
imports: [
BrowserModule,
BrowserAnimationsModule,
AppModuleShared
],
删除 BrowserAnimationsModule 行后,重复问题就停止了。
所以导入部分变为:
imports: [
BrowserModule,
AppModuleShared
],
我不知道这是 webpack 问题、angular 问题,还是 MS 将 app.module 拆分为多个文件的方式的问题...但这就是造成这种情况的原因如果你 运行 进入这个问题!
感兴趣的人可以轻松复制,只需启动一个新的模板项目并添加该行即可。
更新:将 BrowserAnimationsModule
导入添加到 app.module.shared.ts
文件也有同样的问题,NoopAnimationsModule
更新 2:
我刚刚发现这个 GIT 问题有一个适当的解决方法来删除旧的 <app>
https://github.com/aspnet/JavaScriptServices/issues/1165
我的解决方法是更新 boot.browser.ts
文件以包含 oldRootElem!.remove();
:
import 'reflect-metadata';
import 'zone.js';
import 'bootstrap';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.browser.module';
if (module.hot) {
module.hot.accept();
module.hot.dispose(() => {
// Before restarting the app, we create a new root element and dispose the old one
const oldRootElem = document.querySelector('app');
const newRootElem = document.createElement('app');
oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
oldRootElem!.remove();
modulePromise.then(appModule => appModule.destroy());
});
} else {
enableProdMode();
}
// Note: @ng-tools/webpack looks for the following expression when performing production
// builds. Don't change how this line looks, otherwise you may break tree-shaking.
const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);
这样您仍然可以包含 BrowserAnimationsModule
(请参阅 @James 的回答)。