Отложенная загрузка Angular с зависимыми модулями

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

Первоначально мы импортировали все модули в app.module.ts (который загружает весь модуль на странице входа), но теперь мы лениво загрузили его и ввели безопасные модули, которые загружаются после успешного входа в систему. У нас также есть ленивые подмодули в защищенном модуле (конфигурацию маршрутизации можно увидеть в коде ниже).

У нас есть такая маршрутизация:

  1. / secure / dashboard (панель инструментов загружается лениво в модуле Secure, а Secure - в модуле приложения)
  2. / secure / user (пользователь лениво загружается в модуль Secure)
  3. / secure / user / edit (редактирование находится в маршрутизации модуля User)

В нашем приложении есть несколько случаев, когда модулю Dashboard необходимо импортировать модуль User (этот сценарий). Из-за чего Dashboard загружает пользовательскую маршрутизацию в свою конфигурацию маршрутизации, например.

/ secure / dashboard / edit (этот компонент редактирования импортируется из пользовательского модуля) - Проблема

Я пытаюсь достичь того, что я включаю модуль пользователя в панель управления, но не маршруты пользователя.

Я воспроизвел эту проблему в этом демонстрационном приложении, здесь: https://stackblitz.com/edit/deep-lazyloading-routes

app-routing.module.ts

const routes: Routes = [
  { path: 'secure', loadChildren: './secure/secure.module#SecureModule' }
];

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

secure-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: SecureComponent,
    children: [
      { path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule' },
      { path: 'user', loadChildren: '../user/user.module#UserModule' }
    ]
  }
];

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

приборная панель-routing.module.ts

const routes: Routes = [
  { path: '', component: DashboardComponent }
];

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

user-routing.module.ts

const routes: Routes = [
  { path: '', component: UserComponent },
  { path: 'edit', component: UserEditComponent },
];

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

dashboard.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';
import { UserModule } from '../user/user.module';

import { Router} from '@angular/router';

@NgModule({
  imports:      [ CommonModule, FormsModule, DashboardRoutingModule, **UserModule** ],
  declarations: [ DashboardComponent ],
})
export class DashboardModule {
  constructor(private router: Router) {
    console.info("Router Config:")
    console.info(this.router.config);
  }
}

Примечание: В этом демонстрационном приложении есть только панель инструментов, которая зависит от пользователя, в то время как в нашем реальном приложении зависимости распределены по всему приложению.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
1 380
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Маршруты являются неотъемлемой частью любого модуля. Мы не можем ссылаться на такой модуль (с маршрутизацией) в быстро загружаемом модуле при ленивой загрузке. Лучше создать общий модуль и импортировать его.

получил этот ответ на gitter.im/angular/angular, благодаря @ mlc-mlapis (имя пользователя gitter).

soachishti 13.08.2018 09:15

Другие вопросы по теме