2016-11-10 34 views
0

我试图延迟加载一个模块得到同样的问题:延迟加载不与角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,但它仍然不适合我。

回答

1

我是犯错误这里

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

从SystemJS移植到角度cli webpack后得到相同的错误。我们使用桶(index.ts)来跨我们的代码库导入我们的组件。 Webpack似乎不支持这一点。如果您使用任何桶,请尽量避免使用桶,并尝试直接导入组件。我希望这有帮助。

参考:https://github.com/angular/angular-cli/issues/1585

+0

是我使用index.ts导入我的组件,让我这样第一次比我会让你知道 –

+0

我已删除index.ts和直接导入我的组成部分,但其不工作。仍然我越来越错误:不能匹配任何路线。网址细分:'admin' –

+0

我试图通过在报告此错误的js代码中添加断点来解决问题。可能你可以做到这一点,并在这种情况下监视params /变量。对我而言,要加载的组件是未定义的。 – Sundar

-1

我有同样的问题,即使一切是正确的试图在那里导航时,模块未被加载。你只需要更新您的CLI

npm install -g [email protected]