Uncaught (in promise): Error: No NgModule metadata found for '[object Object]'

Question

src/+login/index.ts

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

import { LoginComponent } from './login.component';

export const routes=[
  { path:'',component:LoginComponent }
];
@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    FormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    LoginComponent
  ],
})
export default class Login {
  static routes = routes;
}

src/app.routing.ts

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home';

export const appRoutes: Routes = [
    { path:'',component:HomeComponent },
    { path:'login',loadChildren: ()=>System.import("./+login")}
];

error:

EXCEPTION: Uncaught (in promise): Error: No NgModule metadata found for '[object Object]'. ac_vendor<["./node_modules/@angular/compiler/src/ng_module_resolver.js"]/NgModuleResolverhttp://127.0.0.1:3000/vendor.bundle.js:13839:23

This problem plagued me for a long time, please help me

Answer 1

I had the same problem after upgrading from Angular 2.0.x to Angular 4.0.x Problem was in the syntax of Routes. You need to specify the NgModule that is responsible for display of child page.

Old syntax: { path: 'jobs', loadChildren: () => System.import('./jobs/jobs.module') }

New syntax: { path: 'jobs', loadChildren: 'app/pages/jobs/jobs.module#JobsModule' }

(note the #JobsModule at the end)