延迟加载不适用于 Angular-cli webpack

Question

我正在尝试延迟加载一个模块遇到同样的问题：

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

我正在使用：

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);

如果我在@NgModule 中导入 AdminModule 那么它工作正常，但在那种情况下 LazyLoading 将不起作用我应该怎么做？

我也试过 following workaround 但它仍然不适合我。

Answer 1

从 SystemJS 迁移到 angular cli webpack 后出现同样的错误。我们使用桶 (index.ts) 在我们的代码库中导入我们的组件。 Webpack 似乎不支持这个。如果您正在使用任何桶，请尽量避免使用它并尝试直接导入组件。希望对您有所帮助。

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

Answer 2

我这里搞错了

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

Answer 3

我遇到了同样的问题，尽管一切正常，但当尝试导航到那里时模块没有被加载。您只需要更新您的 CLI

npm install -g angular-cli@latest

延迟加载不适用于 Angular-cli webpack

Lazy loading not working with Angular-cli webpack

angular-cli

angular