延遲加載不與角CLI工作的WebPack

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

我使用：

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

「NG2自舉」：「^ 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);

如果我在@NgModule中導入AdminModule，那麼它工作正常，但在這種情況下，LazyLoading將不起作用，我該怎麼辦？我也嘗試過following workaround，但它仍然不適合我。

來源

2016-11-10 Vinay Pandya

我是犯錯誤這裏

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'} 
     ] 
     } 
    ] 
    } 
];

這樣做的工作對我來說

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'} 
     ] 
     } 
    ] 
    } 
];

來源

2016-11-12 13:11:01