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

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

angular webpack

通过“ng serve”运行Angular 4应用程序时出现运行时错误`,angular,webpack,angular-cli,Angular,Webpack,Angular Cli,我有一个Spring Boot项目，在前端使用Angular。我最近将我的项目从Angular 2升级到Angular 4。在升级之前和之后，我都可以构建和运行我的应用程序，当它作为war捆绑并在tomcat服务器上运行时，它运行得非常好但是，在开发前端更改时，我会通过angular cli命令，ng serve单独运行前端。当我在Angular 2上时，它工作得非常好。现在我在Angular 4上，当我通过ng serve运行应用程序时，当我尝试在浏览器中加载应用程序时，在开发人员控制台中出

我有一个Spring Boot项目，在前端使用Angular。我最近将我的项目从Angular 2升级到Angular 4。在升级之前和之后，我都可以构建和运行我的应用程序，当它作为war捆绑并在tomcat服务器上运行时，它运行得非常好

但是，在开发前端更改时，我会通过angular 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--prod

它将通过错误，应用程序将实际加载。但是我不想在

--prod

模式下运行它，因为我在

环境.ts

文件中有不同的本地运行设置，如果没有这些设置，应用程序将无法正确加载数据

编辑：根据要求，这里是

MyCommonModule

中的

my web common angular

依赖项：

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 {}

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 {
}

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 {
}

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 {}

management.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 {}

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 {
}

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 {
}

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 {}

通知收件箱.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 {}

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 {
}

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 {
}

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 {}

注册设备.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 {}

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 {
}

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 {
}

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 {}

根据聊天中的评论和进一步讨论，发现新升级项目中使用的

primeng

版本与

my web common

中使用的版本存在冲突。只需升级

my web common angular

中的

Priming

即可解决冲突。

根据评论和聊天中的进一步讨论，发现新升级项目中使用的

Priming

版本与

my web common angular

中使用的版本之间存在冲突。只需升级

my web common angular

中的

priming

即可解决冲突。

按照错误消息所述执行：检查您导入的所有模块是否都用NgModule修饰。@JBNizet我的所有自定义模块都有

@NgModule

装饰器。但是没有一个angular模块可以执行-

BrowserModule

，

HttpModule

，等等。您使用的是什么版本的

priming

？@KirkLarkin 4.1.3

my web common angular

使用

priming

4.0.0。这些冲突的版本可能是一个问题吗？请按照错误消息中的说明执行：检查您正在导入的所有模块是否都用NgModule修饰。@JBNizet我的所有自定义模块都有

@NgModule

修饰器。但是没有一个angular模块可以执行-

BrowserModule

，

HttpModule

，等等。您使用的是什么版本的

priming

？@KirkLarkin 4.1.3

my web common angular

使用

priming

4.0.0。这些相互冲突的版本会成为问题吗？