本文介绍了延迟加载在Angular 6中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当尝试导航到' http://localhost:4200/dashboard 时,出现此错误在angualr,angualr-cli 6.0.0中的延迟加载路线

I'm getting this error when try to navigate to 'http://localhost:4200/dashboard' lazy loading route in angualr, angualr-cli 6.0.0

const routes: Routes = [
    {
        path: 'login',
        loadChildren: 'app/login/login.module#LoginModule',

    },
    {
        path: '',
        component: MasterComponent,
        children: [
            {
                path: 'dashboard',
                loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
            }
        ],
    },
    {
        path: '**',
        redirectTo: 'login
    }
];


@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule {
}

推荐答案

在以前的版本中,loadChildren路径支持'app/path/to/module#Module',但它不再起作用,而是使用相对路径'./路径/到/模块#模块'

In previous versions loadChildren path support with 'app/path/to/module#Module' but it's not working anymore, instead of that use relative path './path/to/module#Module'

https://github.com/angular/angular/commit/f44a2c730a84cd86695d1851395ad28423704bd0

Angular社区一直在回答我提出的问题,请在下面找到答复.

https://github.com/angular/angular-cli/issues/10673#issuecomment-391786453

根据角度社区的回应,他们将更新文档.

用途需要从

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: 'app/customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: 'app/orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

模块导入顺序很重要 https://angular.io/guide/router#module-import-order-matters

Module import order matters https://angular.io/guide/router#module-import-order-matters

这篇关于延迟加载在Angular 6中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 23:30
查看更多