模块加载后 CanActivate 和 canLoad 不起作用答案

【问题标题】：CanActivate and canLoad not working after Module loads模块加载后 CanActivate 和 canLoad 不起作用
【发布时间】：2018-06-28 19:52:31
【问题描述】：

我有一个延迟加载模块的应用程序。加载模块后，所有组件也会加载，因此我无法使用可以激活来保护延迟加载模块的各个组件。有没有办法可以延迟加载模块，然后在加载模块后保护组件

【问题讨论】：

标签： angular angular5 lazy-loading canactivate

【解决方案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]
}

【讨论】：

非常感谢。它工作得很好。如果你能解释为什么我们必须创造内在的孩子，我将不胜感激

【解决方案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 { }

【讨论】：