Блог

У меня проблема с предварительной загрузкой моих модулей. В начале у меня есть только модуль настройки, который был предварительно загружен. Но когда я изменил стратегию для модуля безопасности, моя стратегия предварительной загрузки работает не так, как ожидалось. Он вызывается бесконечно.

Вот мой код

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

  ];
  

Вот моя реализация предварительной загрузки.

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

Добавление пустого модуля маршрутизации может остановить бесконечный цикл предварительной загрузки. Не знаю почему. это просто работает.

Я предполагаю, что логика предварительной загрузки требует настройки маршрутизатора модуля. Если конфигурация маршрутизатора пропущена, платформа будет работать так, как ожидалось. Я думаю, что это должна быть ошибка или дефект фреймворка, он должен знать об этом и, по крайней мере, выдавать предупреждение или сообщение об ошибке.

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

  ]
})
export class SecurityModule { }
  

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