首页 文章

延迟加载以在Angular 2中路由除空路线之外的其他路线

提问于
浏览 次
2

我的 app-routing.module.ts 如下：

import { NgModule } from '@angular/core';
    import {
        Routes,
        RouterModule
    } from '@angular/router';

    const routes: Routes = [
        {
            path        : 'reset', 
            loadChildren: 'app/auth/reset-password-form/reset-password-form.module#ResetPasswordFormModule'
        },
        {
            path        : 'verify',
            loadChildren: 'app/auth/verify-user-form/verify-user-form.module#VerifyUserFormModule'
        },
        {
            path        : '404',
            loadChildren: 'app/route-not-found/route-not-found.module#RouteNotFoundModule'
        },
        {
            path        : '',
            pathMatch   : 'full',
            loadChildren: 'app/landing-page/landing-page.module#LandingPageModule'
        },
        {
            path      : '**',
            redirectTo: '/404'
        },

    ];

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

当我导航到 localhost:4200 时，它将正确加载 landing-page.module ，但是，当我输入 localhost:4200/reset 或 localhost:4200/verify 或 localhost:4200/404 时，它将不会加载相关模块，而是自动加载 landing-page.module .

我怎么解决这个问题？

angular routes lazy-loading router

2 回答

  • 0

    您必须向您的childmodule添加路由

    const routes: Routes = [
  { path: '', component: ResetComponent}
  ];
  const ROUTES: ModuleWithProviders = 
  RouterModule.forChild(routes);

    并在子模块中导入ROUTES（ResetModule）

    @NgModule({
 imports: [
    CommonModule,
    ROUTES,
    ],
 declarations: [ResetComponent],
 exports: [ResetComponent]
})
    回复于
  • 0

    由于您在导入中添加了导入，因此可能会发生此问题：[] AppModule（或任何其他模块文件） .

    确保从imports数组中删除所有延迟加载的模块 .

    例如：我有三个名为的模块：HomeModule，ProfileModule和SettingsModule . 如果HomeModule被加载并且ProfileModule和SettingsModule被延迟加载，那么AppModule（app.module.ts）的导入：[]应如下所示：

    导入：[HomeModule]并且它不应包含ProfileModule或SettingsModule，因为它们将在运行时自动加载 .

    回复于

相关问题