Angular 7：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

添加一个空的路由模块可以停止预加载无限循环。不知道为什么。就是可以的。

我猜预载逻辑需要模块路由器配置。如果路由器配置丢失，则框架将按预期工作。我认为应该是框架的错误或缺陷，应该意识到这一点并至少报告警告或错误消息。

@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 { }

然后在SecurityRoutingModule中添加这个SecurityModule类

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 {}