从Angular 4切换到5导致“未捕获错误：未找到NgModule元数据”

Question

我将我的Angular 4应用程序移植到Angular 5，虽然应用程序成功构建应用程序但不加载。运行我的应用程序时出现以下错误：Uncaught Error: No NgModule metadata found for 'AppModule'.

全栈跟踪

我已经尝试过研究一种可能的解决方案 - 我发现了很多，但没有一个有帮助。我试过了：

• 删除node_modules文件夹并重新安装所有内容
• 有人建议只需在AppModule中进行更改并保存即可解决问题。但是在更新任何文件后，我总是收到此错误：

调试失败中的错误。假表达式：主机不应从getSourceFile返回重定向源文件

• 我已经完成了所有项目依赖项，并且它们是最新的
• 如上所述here我已经更新了所有rxjs导入的正确方法，即不要使用import {...} from rxjs/Rx

我觉得奇怪的是我正在使用AOT构建我的应用程序但是错误提到了Jit编译器，所以我不确定应用程序是否确实尝试使用AOT。

main.browser.ts

/**
 * Angular bootstrapping
 */
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from 'environments/environment';

/**
 * App Module
 * our top level module that holds all of our components
 */
import { AppModule } from './app';

/**
 * Bootstrap our Angular app with a top level NgModule
 */
export function main(): Promise<any> {
    return platformBrowserDynamic()
        .bootstrapModule(AppModule)
        .then(environment.decorateModuleRef)
        .catch((err) => console.error(err));
}

/**
 * Needed for hmr
 * in prod this is replace for document ready
 */
switch (document.readyState) {
    case 'loading':
        document.addEventListener('DOMContentLoaded', _domReadyHandler, false);
        break;
    case 'interactive':
    case 'complete':
    default:
        main();
}

function _domReadyHandler() {
    document.removeEventListener('DOMContentLoaded', _domReadyHandler, false);
    main();
}

app.module.ts

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

/*
 * Platform and Environment providers/directives/pipes
 */
import { environment } from '../environments/environment';
// App is our top level component
import { AppComponent } from './app.component';
import { APP_RESOLVER_PROVIDERS } from './app.resolver';
import { NoContentComponent } from './no-content';

import { CoreModule, AppConfigService } from './core';

import { AppRoutingModule } from './app-routing.module';
import { AppConfigLoader } from './app-config.loader';

// Application wide providers
const APP_PROVIDERS = [
    ...APP_RESOLVER_PROVIDERS
];

/**
 * `AppModule` is the main entry point into Angular2's bootstraping process
 */
@NgModule({
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent,
        NoContentComponent
    ],
    imports: [ // import Angular's modules
        BrowserModule,
        FormsModule,
        HttpModule,
        BrowserAnimationsModule,
        CoreModule,
        AppRoutingModule
    ],
    providers: [ // expose our Services and Providers into Angular's dependency injection
        environment.ENV_PROVIDERS,
        APP_PROVIDERS,
        AppConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: AppConfigLoader,
            deps: [AppConfigService],
            multi: true
        }
    ]
})
export class AppModule { }

环境

• Angular：5.2.8
• TypeScript：2.6.2
• Webpack：3.11.0

Answer 1

检查这个https://github.com/angular/angular-cli/issues/8798。 我认为webpack不兼容是个问题

Answer 2

当我尝试迁移到Angular 5时，我曾经有过类似的问题，我这样做了：

1. 删除了node_modules文件夹：rm -rf node_modules
2. 删除了webpack：npm remove webpack
3. 清理npm缓存：qazxsw poi
4. 安装了最新版本的角度cli：npm cache clean --force
5. 安装了依赖项：npm install --save-dev @angular/cli@latest

在我清理了npm现金后，它才对我有用