webpack - Runtime Error when running Angular 4 app via `ng serve` -

i have spring boot project uses angular on frontend. upgraded project angular 2 angular 4. both before , after upgrade, can build , run application , runs fine when it's bundled war , run on tomcat server.

however, when developing frontend changes, run frontend separately via angular cli command, ng serve. when on angular 2, working fine. i'm on angular 4, when run application via ng serve, following error in developer console when try load application in browser.

uncaught error: unexpected value '[object object]' imported module 'appmodule'. please add @ngmodule annotation.     @ syntaxerror (compiler.es5.js:1690) [<root>]     @ :4200/vendor.bundle.js:99805:44 [<root>]     @ array.foreach (<anonymous>) [<root>]     @ compilemetadataresolver.webpackjsonp.../../../compiler/@angular/compiler.es5.js.compilemetadataresolver.getngmodulemetadata (compiler.es5.js:15365) [<root>]     @ jitcompiler.webpackjsonp.../../../compiler/@angular/compiler.es5.js.jitcompiler._loadmodules (compiler.es5.js:26795) [<root>]     @ jitcompiler.webpackjsonp.../../../compiler/@angular/compiler.es5.js.jitcompiler._compilemoduleandcomponents (compiler.es5.js:26768) [<root>]     @ jitcompiler.webpackjsonp.../../../compiler/@angular/compiler.es5.js.jitcompiler.compilemoduleasync (compiler.es5.js:26697) [<root>]     @ platformref_.webpackjsonp.../../../core/@angular/core.es5.js.platformref_._bootstrapmodulewithzone (core.es5.js:4536) [<root>]     @ platformref_.webpackjsonp.../../../core/@angular/core.es5.js.platformref_.bootstrapmodule (core.es5.js:4522) [<root>]     @ object.../../../../../src/main.ts (main.ts:11) [<root>]     @ object.0 (main.ts:11) [<root>] 

any ideas why build , run fine in production mode, receives above error when running via ng serve?

here app.module.ts:

import {browsermodule} '@angular/platform-browser'; import {ngmodule} '@angular/core'; import {httpmodule} '@angular/http'; import {appcomponent} './app.component'; import {routermodule} "@angular/router"; import {maintenancemodule} "./maintenance/maintenance.module"; import {mycommonmodule} "my-web-common-angular"; import {coremodule} "./core/core.module"; import {notificationservice} "./core/notification.service"; import {managementmodule} "./management/management.module"; import {registereddevicesmodule} "./registered-devices/registered-devices.module"; import {notificationinboxmodule} "./notification-inbox/notification-inbox.module"; import {browseranimationsmodule} "@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 { } 

update: if run ng serve --prod gets past error , application loads. don't want run in --prod mode, because have different settings specific running locally in environment.ts files, , app won't load data without settings.

edit: requested, here mycommonmodule my-web-common-angular dependency:

import { ngmodule, modulewithproviders } '@angular/core'; import { httpmodule } '@angular/http'; import { commonmodule } '@angular/common'; import { formsmodule }  '@angular/forms';  import { headercomponent } './src/header/header.component'; import { footercomponent } './src/footer/footer.component'; import {hierarchyselectcomponent} './src/hierarchy/hierarchy-select.component'; import {hierarchyselectdialogcomponent} './src/hierarchy/hierarchy-select-dialog.component'; import {treemodule} 'primeng/components/tree/tree'; import {dialogmodule}  'primeng/components/dialog/dialog'; import {buttonmodule} 'primeng/components/button/button'; import {inputtextmodule} "primeng/components/inputtext/inputtext"; import { messagesmodule} 'primeng/components/messages/messages';  export * './src/header/header.component'; export * './src/footer/footer.component'; export * './src/hierarchy/hierarchy-select.component'; export * './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     };   } } 

and other modules project.

maintenance.module.ts

import {ngmodule} "@angular/core"; import {routermodule} "@angular/router"; import {notificationlistcomponent} "./notification-list.component"; import {commonmodule} "@angular/common"; import {sharedmodule} "primeng/components/common/shared"; import {datatablemodule} "primeng/components/datatable/datatable"; import {notificationeditcomponent} "./notification-edit.component"; import {fieldsetmodule} "primeng/components/fieldset/fieldset"; import {formsmodule} "@angular/forms"; import {growlmodule} "primeng/components/growl/growl"; import {tooltipmodule} "primeng/components/tooltip/tooltip"; import {confirmdialogmodule} "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} "primeng/components/growl/growl"; import {fieldsetmodule} "primeng/components/fieldset/fieldset"; import {sharedmodule} "primeng/components/common/shared"; import {routermodule} "@angular/router"; import {formsmodule} "@angular/forms"; import {commonmodule} "@angular/common"; import {ngmodule} "@angular/core"; import {notificationmanagecomponent} "./notification-manage.component"; import {notificationselectcomponent} "./notification-select.component"; import {tooltipmodule} "primeng/components/tooltip/tooltip"; import {messagesmodule} "primeng/primeng"; import {registrationservice} "./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} "@angular/core"; import {commonmodule} "@angular/common"; import {formsmodule} "@angular/forms"; import {routermodule} "@angular/router"; import {dialogmodule, growlmodule, sharedmodule, tooltipmodule} "primeng/primeng"; import {notificationinboxcomponent} "./notification-inbox.component"; import {notificationmessagecomponent} "./notification-message.component"; import {notificationinboxservice} "./notification-inbox.service"; import {paginationcomponent} "./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} "@angular/core"; import {formsmodule} "@angular/forms"; import {commonmodule} "@angular/common"; import {routermodule} "@angular/router"; import {growlmodule, sharedmodule, tooltipmodule} "primeng/primeng"; import {registereddevicescomponent} "./registered-devices.component";  @ngmodule({   declarations: [     registereddevicescomponent   ],   imports:[     commonmodule,     formsmodule,     routermodule.forchild([       {path: "registered-devices", component: registereddevicescomponent}     ]),     sharedmodule,     growlmodule,     tooltipmodule   ],   providers: [   ] }) export class registereddevicesmodule {} 

based on comments , further discussion in chat, discovered conflict between version of primeng being used in newly upgraded project , version being used in my-web-common-angular. upgrading primeng in my-web-common-angular resolved conflict.