Я занимаюсь преобразованием приложения Angular для ленивой загрузки. Есть несколько модулей, которые зависят друг от друга.
Первоначально мы импортировали все модули в app.module.ts (который загружает весь модуль на странице входа), но теперь мы лениво загрузили его и ввели безопасные модули, которые загружаются после успешного входа в систему. У нас также есть ленивые подмодули в защищенном модуле (конфигурацию маршрутизации можно увидеть в коде ниже).
У нас есть такая маршрутизация:
В нашем приложении есть несколько случаев, когда модулю 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);
}
}
Примечание: В этом демонстрационном приложении есть только панель инструментов, которая зависит от пользователя, в то время как в нашем реальном приложении зависимости распределены по всему приложению.
Маршруты являются неотъемлемой частью любого модуля. Мы не можем ссылаться на такой модуль (с маршрутизацией) в быстро загружаемом модуле при ленивой загрузке. Лучше создать общий модуль и импортировать его.
получил этот ответ на gitter.im/angular/angular, благодаря @ mlc-mlapis (имя пользователя gitter).