No NgModule metadata found for 'undefined' on angular lazy loading routes

Question

I am trying to build modularize my application by breaking my lazy loading my routes. Here is what my code looks like on the child route

import { SignUpComponent } from './signup/signup.component';
import { TeamsPageComponent } from './teams/teamspage.component';
import { TeamsListComponent } from './teams/teamslist.component';
import { TeamUsersComponent } from './teams/team-users.component';
import { EditTeamComponent } from './teams/edit-team.component';
import { UsersPageComponent } from './users/userspage.component';
import { CreateUserComponent } from './users/create-user.component';
import { UserPermissionComponent } from './users/user-permission.component';
import { EditUserComponent } from './users/edit-user.component';

import { AuthGuard } from '../guards/auth.guard';
import { AccessLevel0Guard } from '../guards/level0.guard';

export const routes = [
  { path: '',
    children: [
              { path: '', component: TeamsListComponent, canActivate: [AccessLevel0Guard] },
              { path: ':teamId/edit', component: EditTeamComponent },
              {
                  path: ':teamId/users', component: UsersPageComponent,
                  children: [
                      { path: '', component: TeamUsersComponent },
                      { path: 'create/:id', component: CreateUserComponent },
                      { path: ':id/permission', component: UserPermissionComponent },
                      { path: ':id/edit', component: EditUserComponent }
                  ]
              }],
];

I then imported it into

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from  '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';

import { routes } from './user.routes';
import { AccessLevel0Guard } from '../guards/level0.guard';

import { SignUpComponent } from './signup/signup.component';
import { TeamsPageComponent } from './teams/teamspage.component';
import { TeamsListComponent } from './teams/teamslist.component';
import { TeamUsersComponent } from './teams/team-users.component';
import { EditTeamComponent } from './teams/edit-team.component';
import { UsersPageComponent } from './users/userspage.component';
import { CreateUserComponent } from './users/create-user.component';
import { UserPermissionComponent } from './users/user-permission.component';
import { EditUserComponent } from './users/edit-user.component';

@NgModule({
  declarations: [
    /**
     * Components / Directives/ Pipes
     */
    SignUpComponent,
    TeamsPageComponent,
    TeamsListComponent,
    TeamsUsersComponent,
    EditTeamComponent,
    UsersPageComponent,
    CreateUserComponent,
    UserPermissionComponent,
    EditUserComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
  ]
})

export class UserModule {
  public static routes = routes;
}

and then exported it using

export { UserModule } from './user.module';

on the index.ts file

I then used the following on the parent route

    import { Routes } from '@angular/router';
import { BaseComponent } from './base/base.component';
import { AppComponent } from './app.component';
import { SignInComponent } from './signin/signin.component';
import { UserModule } from './user/user.module.ts';
import { AuthGuard } from './guards/auth.guard';
import { DashboardPageComponent } from './dashboard-graph/dashboard.component';
import { NoContentComponent } from './no-content/no-content.component';

import { DataResolver } from './app.resolver';

export const ROUTES: Routes = [
  {
        path: '', component: AppComponent,
        children: [
           { path: '', component: SignInComponent },
             {
                path: 'dashboard',
                component: BaseComponent,
                canActivate: [AuthGuard],
                children: [
                  { path: '', component: DashboardPageComponent },
                  {
                    path: 'teams', loadChildren: './+user#UserModule'
                  },
                ]
             }
        ]
  },
  { path: '**', component: NoContentComponent }
];

This is then imported into my app.module.ts with the following configuration on the @NgModule

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule,
    NgxDatatableModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    MaterialModule,
    LeafletModule,
    RouterModule.forRoot(ROUTES, { useHash: false, preloadingStrategy: PreloadAllModules })
  ],

The main route loads up just fine but when i try to load the modularized route I get the error below.

No NgModule metadata found for 'undefined'

Answer 1

This error message will also be shown when navigating to a route where there is a runtime error during initialization (e.g. static TypeScript code execution). Try typing the full URL in the browser directly to see a better error description.

Answer 2

It seems that you wrote the wrong path, and wrong filename: loadChildren: './+user#UserModule'

Replace it with:loadChildren: './user/user.module#UserModule'

And needlessly to import import { UserModule } from './user/user.module.ts';

Answer 3

I had the same problem.

you wrote

export { UserModule } from './user.module';

and

children: [
                  { path: '', component: DashboardPageComponent },
                  {
                    path: 'teams', loadChildren: './+user#UserModule'
                  },
                ]

it should be

...
{
     path: 'teams', loadChildren: './+user/user.module#UserModule'
},

Hope this helps you!