Question

我有一个延迟加载模块的应用程序。一旦加载了模块，所有组件也将加载，因此我无法使用可以激活以保护延迟加载的模块的各个组件。有什么方法可以让我延迟加载模块，然后在模块加载后保护组件

Answer 1

Have a look into the below code, Maybe it's useful for you.
This is my module routing example, which lazy loads.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '../auth/auth-guard.service';
import { ModuleMainComponent } '...' // path
import { PathOneComponent } '...' // path


const demoRoutes: Routes = [
    {
        path: '',
        component: ModuleMainComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                canActivateChild: [AuthGuard],
                children: [
                    {
                        path: 'path1', component:PathOneComponent,
                        canActivate: [AuthGuard]
                    }
                ]

            }
        ]
     }
]

@NgModule({
    imports: [
        RouterModule.forChild(demoRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class DemoRoutingModule { }

app.routes.ts

{
        path: 'demo',
        loadChildren: '....', // path of module
        canActivate: [AuthGuard]
}

Answer 2

这是在Angular中使用Auth Guard进行延迟加载的基本步骤。

在app-routing.module.ts

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

/* Import child modules start */
import { Module1 } from './module1.module';
import { Module2 } from './module2.module';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [

    { path: '', redirectTo: 'module1', pathMatch: 'full' },

    { path: 'module1', loadChildren: () => Module1 },

    { path: 'module2', loadChildren: () => Module2 },

    { path: '**', redirectTo: '404'},
    { path: '404', component: PageNotFoundComponent}

];

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

在module1-routing.module.ts中：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './../../core/guard/auth.guard';
import { AuthModule } from './auth/auth.module';
import { HomeLayoutComponent } from './../../layouts/home-layout/home-layout.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [

    {
        path: 'module1, component: HomeComponent, canActivate: [AuthGuard]
children: [
            { path: '', 'dashboard', pathMatch: 'full' },
            { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
            { path: 'myapps', component: MyApplicationsComponent, canActivate: [AuthGuard] },

    {
        path: 'module1authmodule',loadChildren: () => AuthModule
    }

];

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

模块加载后CanActivate和canLoad无法正常工作

2 个答案: