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

经过多次搜索,结果证明这是由于我的 app.module.browser.ts 文件

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppModuleShared
],

因此,导入部分变为:

imports: [
    BrowserModule,
    AppModuleShared
],

我不知道这是一个网页问题,角度问题,还是微软的应用程序方式问题。模块拆分为多个文件。。。但如果你遇到这个问题,这就是导致它的原因!

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

更新:添加 BrowserAnimationsModule app.module.shared.ts 文件也有同样的问题,就像 NoopAnimationsModule

我刚刚发现这个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 (参见 ).