Question

我的项目使用的是Visual Studio .Net-Core AngularJS模板（即包含app.module.shared.ts，app.module.browser.ts，app.module.server.ts个文件）

我遇到了一个奇怪的问题，每当我进行更改时，我的DOM中都会添加一个新的<app>元素，并且未删除旧的<app>元素。如果我刷新页面，那一切都恢复正常。

Answer 1

经过大量搜索后发现，这是因为我的app.module.browser.ts文件

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppModuleShared
],

删除BrowserAnimationsModule行后，复制问题就停止了。

因此，导入部分变为：

imports: [
    BrowserModule,
    AppModuleShared
],

我不知道这是一个webpack问题，一个角度问题，还是MS将app.module拆分成多个文件的方式的问题......但如果遇到这个问题，那就是导致它的原因！

对于那些感兴趣的人来说很容易复制，只需启动一个新的模板项目并添加该行。

更新：将BrowserAnimationsModule导入添加到app.module.shared.ts文件也存在同样的问题，NoopAnimationsModule

也是如此

更新2：我刚刚发现此GIT问题，并通过正确的解决方法删除旧的<app> https://github.com/aspnet/JavaScriptServices/issues/1165

Answer 2

对我来说，解决方法是将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 中的答案）。

.Net Core Angular 4 - 捆绑重建时重复的应用程序组件

2 个答案: