延迟加载在Angular 6中不起作用 [英] Lazy loading not working in 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

错误错误:未捕获(承诺):错误:找不到模块 "app/dashboard/dashboard.module".错误:找不到模块 "app/dashboard/dashboard.module". 在$ _lazy_route_resource惰性名称空间对象:5

ERROR Error: Uncaught (in promise): Error: Cannot find module "app/dashboard/dashboard.module". Error: Cannot find module "app/dashboard/dashboard.module". at $_lazy_route_resource lazy namespace object:5

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'

angular/aio/content/examples/lazy-loading-ngmodules 该示例在3天前的Angular 6版本中也已更改

angular/aio/content/examples/lazy-loading-ngmodules example also has been changed 3 days ago with Angular 6 release

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

另一个提示:

One other tip:

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

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

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