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

时间：2017-09-13 20:13:04

标签： angular webpack angular-cli

我有一个在前端使用Angular的Spring Boot项目。我最近将我的项目从Angular 2升级到Angular 4.在升级之前和之后，我都可以构建并运行我的应用程序，当它被捆绑为战争并且我在我的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运行时收到上述错误？

这是我的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文件中本地运行它，并且该应用无法正确加载数据那些设置。

编辑：根据要求，此处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 {}

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

1 个答案:

答案 0 :(得分：0)

根据聊天中的评论和进一步讨论，发现这是新升级项目中使用的primeng版本与my-web-common-angular中使用的版本之间的冲突。只需升级primeng中的my-web-common-angular即可解决冲突。

相关问题
最新问题