Angular7：PreloadingStrategy扩展方法被无限次调用

Question

我在预加载模块时遇到问题。一开始，我只有一个预加载的设置模块。但是当我更改安全模块的策略时，我的预加载策略没有按预期工作。它被无限地调用。

这是我的代码

const appRoutes: Routes = [
 {path: '', redirectTo: 'login', pathMatch: 'full', canActivate: [AuthGuard]
},

  {path: 'login', component: LoginComponent},
  {path: 'home', component: WelcomeComponent, children: [
  {path: 'security',loadChildren: './modules/security/security.module#SecurityModule', data:{preload: true }},
    {path: 'setup',loadChildren: './modules/setup/setup.module#SetupModule', data: { preload: false }}
    ]}

  ];

这是我的 PreloadingStrategy 实现。

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable()
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preloadedModules: string[] = [];

  preload(route: Route, load: () => Observable<any>): Observable<any> {
        if (route.data && route.data['preload']) {
              this.preloadedModules.push(route.path);

          console.log('Preloaded: ' + route.path);

          return load();
    } else {
      return of(null);
    }
  }
}

图像连续显示（399+）称为此策略方法。

编辑：

这是我的安全模块代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SysCommonModule } from '../common/sys.common.module';

@NgModule({
  declarations: [

  ],
    entryComponents: [

    ],

  imports: [

    /**** Angular ******/
    CommonModule,
    FormsModule,
    ReactiveFormsModule,

    /**** Third Party Controls ******/



    /**** Custom ******/
    SysCommonModule


  ],
  providers: []
})
export class SecurityModule {}

Answer 1

添加一个空路由模块可以停止预加载死循环。不知道为什么。它只是工作。

我想预加载逻辑需要模块路由器配置。如果路由器配置丢失，框架将按预期工作。我觉得应该是框架的BUG或者缺陷，应该意识到这一点，至少报告一个警告或者错误信息。

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild([]) // <= add an empty router configuration.

  ]
})
export class SecurityModule { }

Answer 2

@xuemind 你是对的。

要解决这个问题，我必须在我的安全模块中添加一个空的安全路由器模块。为此，我创建了一个新文件 SecurityRoutingModule

注意：我添加了这个文件，以备将来需要此安全路由模块时使用。否则，您只需在模块中添加 RouterModule.forChild([])。

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

const routes: Routes = [
  {path: '', redirectTo: 'dummy', pathMatch: 'full'}

];

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

export class SecurityRoutingModule { }

然后在SecurityModule

中添加这个SecurityRoutingModuleclass

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SysCommonModule } from '../common/sys.common.module';
import { SecurityRoutingModule } from './security-routing.module';

@NgModule({
  declarations: [

  ],
    entryComponents: [

    ],

  imports: [

    /**** Angular ******/
    CommonModule,
    FormsModule,
    ReactiveFormsModule,

    /**** Third Party Controls ******/



    /**** Custom ******/
    SysCommonModule,
    SecurityRoutingModule // <= Added Security Routing Module Here.


  ],
  providers: []
})
export class SecurityModule {}

Angular7：PreloadingStrategy扩展方法被无限次调用

Angular 7: PreloadingStrategy extended method being called infinite time

rxjs

angular-routing

angular