Lazy loading not working with Angular-cli webpack

Question

I am trying to lazy load one module getting same issue:

Error: Cannot match any routes. URL Segment: 'admin'

I am using:

angular-cli: 1.0.0-beta.19-3 node: 6.7.0 os: win32 x64

"ng2-bootstrap": "^1.1.16",

package.json

"dependencies": { "@angular/common": "2.1.2", "@angular/compiler": "2.1.2", "@angular/core": "2.1.2", "@angular/forms": "2.1.2", "@angular/http": "2.1.2", "@angular/platform-browser": "2.1.2", "@angular/platform-browser-dynamic": "2.1.2", "@angular/router": "~3.1.0", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "ng2-bootstrap": "^1.1.16", "ng2-sidebar": "^1.6.2", "rxjs": "5.0.0-beta.12", "ts-helpers": "^1.1.1", "zone.js": "^0.6.23" }, "devDependencies": { "@types/jasmine": "^2.2.30", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.19-3", "codelyzer": "1.0.0-beta.1", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.9", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "~2.0.3", "webdriver-manager": "10.2.5" }

app.routing.ts

const adminRoutes: Routes = [
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [LoginAuth]
  }
];

const ROUTES: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  ...loginRoutes,
  ...adminRoutes
];


export const routing: ModuleWithProviders = RouterModule.forRoot(ROUTES);

app.module.ts

@NgModule({
  declarations: [..],
  imports: [...,ng2Components,routing,LoginModule],
  providers: [LoginService, LoginAuth],
  bootstrap: [AppComponent]
})
export class AppModule {
}

admin.routing.ts

const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [LoginAuth],
    children: [
      {
        path: 'admin',
        canActivateChild: [LoginAuth],
        children: [
          {path: 'users', component: UserComponent},
          {path: 'dashboard', component: AdminDashboardComponent},
          {path: '', redirectTo: '/admin/dashboard', pathMatch: 'full'}
        ]
      }
    ]
  }
];

export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);

If I am importing AdminModule in @NgModule then it's working fine, but in that case LazyLoading will not work what should I do?

I also tried following workaround but it's still not working for me.

Answer 1

i was making mistake here

const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [LoginAuth],
    children: [
      {
        path: 'admin', // <<<<<<<<=========== here it should like this: '' not this 'admin'
        canActivateChild: [LoginAuth],
        children: [
          {path: 'users', component: UserComponent},
          {path: 'dashboard', component: AdminDashboardComponent},
          {path: '', redirectTo: '/admin/dashboard', pathMatch: 'full'}
        ]
      }
    ]
  }
];

Doing this its working for me

const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [LoginAuth],
    children: [
      {
        path: '',
        canActivateChild: [LoginAuth],
        children: [
          {path: 'users', component: UserComponent},
          {path: 'dashboard', component: AdminDashboardComponent},
          {path: '', redirectTo: '/admin/dashboard', pathMatch: 'full'}
        ]
      }
    ]
  }
];

Answer 2

Got same error after migrating from SystemJS to angular cli webpack. We were using barrels (index.ts) to import our components across our code base. Webpack doesn't seem to support this. If you are using any barrels, try to avoid it and try importing the components directly. I hope this helps.

For reference : https://github.com/angular/angular-cli/issues/1585

Answer 3

I had the same problem and even though everything was correct the module wasn't being loaded when try to navigate there. You just need to update your CLI

npm install -g angular-cli@latest