我的项目使用的是Visual Studio .Net-Core AngularJS模板(即app.module.shared.ts
,app.module.browser.ts
,app.module.server.ts
文件)
我有一个奇怪的问题,每当我做出更改时,我的DOM中都会添加一个新的<app>
元素,并且没有删除旧的<app>
元素。如果我刷新页面,那一切都恢复正常。
经过多次搜索后发现它是由于我的app.module.browser.ts
文件中有这个
imports: [
BrowserModule,
BrowserAnimationsModule,
AppModuleShared
],
删除BrowserAnimationsModule行后,复制问题就停止了。
因此,导入部分变为:
imports: [
BrowserModule,
AppModuleShared
],
我不知道这是一个webpack问题,一个角度问题,或者是将app.module拆分成多个文件的MS方式的问题......但如果遇到这个问题,那就是导致它的原因!
对于那些感兴趣的人来说,很容易复制,只需启动一个新的模板项目并添加该行。
更新:将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的回答)。