通过`ng serve`运行Angular 4应用程序时出现运行时错误

我有一个在前端使用Angular的Spring Boot项目。我最近将我的项目从Angular 2升级到了Angular 4.在升级前后，我可以构建并运行我的应用程序，当它作为战争捆绑并运行在我的Tomcat服务器上时，它运行得非常好。通过`ng serve`运行Angular 4应用程序时出现运行时错误

但是，当开发前端更改时，我将通过角度cli命令ng serve单独运行前端。当我在Angular 2上时，这个工作非常好。现在我在使用Angular 4，当我通过ng serve运行应用程序时，当我尝试在浏览器中加载应用程序时，在开发者控制台中出现以下错误。

Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation. 
    at syntaxError (compiler.es5.js:1690) [<root>] 
    at :4200/vendor.bundle.js:99805:44 [<root>] 
    at Array.forEach (<anonymous>) [<root>] 
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15365) [<root>] 
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26795) [<root>] 
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26768) [<root>] 
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26697) [<root>] 
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536) [<root>] 
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522) [<root>] 
    at Object.../../../../../src/main.ts (main.ts:11) [<root>] 
    at Object.0 (main.ts:11) [<root>]

任何想法，为什么通过ng serve运行时，它会建立在生产模式下运行完全正常，但收到上述错误？

这是我app.module.ts：

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 
import {HttpModule} from '@angular/http'; 
import {AppComponent} from './app.component'; 
import {RouterModule} from "@angular/router"; 
import {MaintenanceModule} from "./maintenance/maintenance.module"; 
import {MyCommonModule} from "my-web-common-angular"; 
import {CoreModule} from "./core/core.module"; 
import {NotificationService} from "./core/notification.service"; 
import {ManagementModule} from "./management/management.module"; 
import {RegisteredDevicesModule} from "./registered-devices/registered-devices.module"; 
import {NotificationInboxModule} from "./notification-inbox/notification-inbox.module"; 
import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    HttpModule, 
    RouterModule.forRoot([ 
     {path: "", redirectTo: "manage", pathMatch: "full"}, 
     {path: "**", redirectTo: "manage", pathMatch: "full"}, 
    ]), 
    CoreModule, 
    MaintenanceModule, 
    ManagementModule, 
    RegisteredDevicesModule, 
    NotificationInboxModule, 
    MyCommonModule.forRoot() 
    ], 
    providers: [NotificationService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

更新：如果我运行ng serve --prod它会过去的错误和实际应用负载。但我不想在--prod模式下运行它，因为我有不同的设置，专门在我的environment.ts文件中本地运行它，并且如果没有这些设置，应用程序将无法正确加载数据。

编辑：按照要求，这里是从my-web-common-angular依赖MyCommonModule：

import { NgModule, ModuleWithProviders } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { HeaderComponent } from './src/header/header.component'; 
import { FooterComponent } from './src/footer/footer.component'; 
import {HierarchySelectComponent} from './src/hierarchy/hierarchy-select.component'; 
import {HierarchySelectDialogComponent} from './src/hierarchy/hierarchy-select-dialog.component'; 
import {TreeModule} from 'primeng/components/tree/tree'; 
import {DialogModule} from 'primeng/components/dialog/dialog'; 
import {ButtonModule} from 'primeng/components/button/button'; 
import {InputTextModule} from "primeng/components/inputtext/inputtext"; 
import { MessagesModule} from 'primeng/components/messages/messages'; 

export * from './src/header/header.component'; 
export * from './src/footer/footer.component'; 
export * from './src/hierarchy/hierarchy-select.component'; 
export * from './src/hierarchy/hierarchy-select-dialog.component'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    HttpModule, 
    TreeModule, 
    DialogModule, 
    ButtonModule, 
    InputTextModule, 
    MessagesModule 
    ], 
    declarations: [ 
    HeaderComponent, 
    FooterComponent, 
    HierarchySelectComponent, 
    HierarchySelectDialogComponent 
    ], 
    exports: [ 
    HeaderComponent, 
    FooterComponent, 
    HierarchySelectComponent, 
    HierarchySelectDialogComponent 
    ] 
}) 
export class MyCommonModule { 
    public static forRoot(): ModuleWithProviders { 
    return { 
     ngModule: MyCommonModule 
    }; 
    } 
}

而且从我的项目中的其它模块。

maintenance.module.ts

import {NgModule} from "@angular/core"; 
import {RouterModule} from "@angular/router"; 
import {NotificationListComponent} from "./notification-list.component"; 
import {CommonModule} from "@angular/common"; 
import {SharedModule} from "primeng/components/common/shared"; 
import {DataTableModule} from "primeng/components/datatable/datatable"; 
import {NotificationEditComponent} from "./notification-edit.component"; 
import {FieldsetModule} from "primeng/components/fieldset/fieldset"; 
import {FormsModule} from "@angular/forms"; 
import {GrowlModule} from "primeng/components/growl/growl"; 
import {TooltipModule} from "primeng/components/tooltip/tooltip"; 
import {ConfirmDialogModule} from "primeng/components/confirmdialog/confirmdialog"; 

@NgModule({ 
    declarations: [ 
    NotificationListComponent, 
    NotificationEditComponent 
    ], 
    imports: [ 
    CommonModule, 
    FormsModule, 
    RouterModule.forChild([ 
     {path: "maintenance/list", component: NotificationListComponent}, 
     {path: "maintenance/edit/:id", component: NotificationEditComponent}, 
     {path: "maintenance/edit", component: NotificationEditComponent} 
    ]), 
    SharedModule, 
    DataTableModule, 
    FieldsetModule, 
    GrowlModule, 
    TooltipModule, 
    ConfirmDialogModule 
    ] 
}) 
export class MaintenanceModule {}

management.module.ts

import {GrowlModule} from "primeng/components/growl/growl"; 
import {FieldsetModule} from "primeng/components/fieldset/fieldset"; 
import {SharedModule} from "primeng/components/common/shared"; 
import {RouterModule} from "@angular/router"; 
import {FormsModule} from "@angular/forms"; 
import {CommonModule} from "@angular/common"; 
import {NgModule} from "@angular/core"; 
import {NotificationManageComponent} from "./notification-manage.component"; 
import {NotificationSelectComponent} from "./notification-select.component"; 
import {TooltipModule} from "primeng/components/tooltip/tooltip"; 
import {MessagesModule} from "primeng/primeng"; 
import {RegistrationService} from "./registration.service"; 

@NgModule({ 
    declarations: [ 
    NotificationManageComponent, 
    NotificationSelectComponent 
    ], 
    imports: [ 
    CommonModule, 
    FormsModule, 
    RouterModule.forChild([ 
     {path: "manage", component: NotificationManageComponent}, 
     {path: "manage/:userId", component: NotificationManageComponent} 
    ]), 
    SharedModule, 
    FieldsetModule, 
    GrowlModule, 
    MessagesModule, 
    TooltipModule 
    ], 
    providers: [ 
    RegistrationService 
    ] 
}) 
export class ManagementModule { 
}

notification-inbox.module.ts

import {NgModule} from "@angular/core"; 
import {CommonModule} from "@angular/common"; 
import {FormsModule} from "@angular/forms"; 
import {RouterModule} from "@angular/router"; 
import {DialogModule, GrowlModule, SharedModule, TooltipModule} from "primeng/primeng"; 
import {NotificationInboxComponent} from "./notification-inbox.component"; 
import {NotificationMessageComponent} from "./notification-message.component"; 
import {NotificationInboxService} from "./notification-inbox.service"; 
import {PaginationComponent} from "./pagination.component"; 

@NgModule({ 
    declarations: [ 
    NotificationInboxComponent, 
    NotificationMessageComponent, 
    PaginationComponent 
    ], 
    imports:[ 
    CommonModule, 
    FormsModule, 
    RouterModule.forChild([ 
     {path: "inbox", component: NotificationInboxComponent} 
    ]), 
    SharedModule, 
    GrowlModule, 
    TooltipModule, 
    DialogModule 
    ], 
    providers: [ 
    NotificationInboxService 
    ] 
}) 
export class NotificationInboxModule { 
}

registered-devices.module.ts

import {NgModule} from "@angular/core"; 
import {FormsModule} from "@angular/forms"; 
import {CommonModule} from "@angular/common"; 
import {RouterModule} from "@angular/router"; 
import {GrowlModule, SharedModule, TooltipModule} from "primeng/primeng"; 
import {RegisteredDevicesComponent} from "./registered-devices.component"; 

@NgModule({ 
    declarations: [ 
    RegisteredDevicesComponent 
    ], 
    imports:[ 
    CommonModule, 
    FormsModule, 
    RouterModule.forChild([ 
     {path: "registered-devices", component: RegisteredDevicesComponent} 
    ]), 
    SharedModule, 
    GrowlModule, 
    TooltipModule 
    ], 
    providers: [ 
    ] 
}) 
export class RegisteredDevicesModule {}

来源

2017-09-13 Andrew Mairose

你的'AppModule'是怎么看的？ – amal

刚刚添加:) –

请按照错误消息的说明进行操作：检查您正在导入的所有模块是否都装有NgModule。 –