Ленивая загрузка ngModules с собственными маршрутами

Question

У меня есть этот сценарий.

У меня есть два угловых модуля: AuthModule а также DashModule, Каждый из этих модулей имеет свои .routing.tsфайлы.

Затем каждый из модулей импортируется в AppModule на уровне приложения.

В коде здесь:

auth.module.ts я сидела src/app/auth/auth.module.ts

auth.module.ts

import { NgModule } from '@angular/core';
... // all necessary imports
import { AuthRoutingModule } from './auth-module.routing';

@NgModule({
  imports: [
    CommonModule,
    AuthRoutingModule
  ],
  declarations: [
    // all declarations
  ],
  providers: []
})

export class AuthModule { }

src/app/auth/auth-module.routing.ts

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

const routes: Routes = [
    { path: 'not-verified', component: NotVerifiedComponent },
    { path: 'login', component: LoginRegisterComponent },
    { path: 'register', component: LoginRegisterComponent },
    { path: 'verify-email/:token', component: VerifyEmailComponent },
    { path: 'reset-password/:token', component: ResetPasswordComponenet },
    { path: 'forgot', component: ForgotComponent },
  ];

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

DashModule также следуйте той же схеме, что и AuthModule

мой src/app/app.routing.ts выглядит так:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotfoundComponent } from './pages/notfound/notfound.component';

const appRoutes: Routes = [ 
  // this is more like a catchall route. if all routes fail
  {path: '**', component: NotfoundComponent },
];

export const AppRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

мой src/app/app.module.ts выглядит так:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRouting } from './app.routing';

import { AuthModule } from './auth/auth.module';
import { DashModule } from './dash/dash.module';
// Providers
// some providers

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    ...
    AuthModule,
    DashModule,
    AppRouting
  ],
  exports: [  ],
  providers: [
   // providers here
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Теперь я могу сделать как DashModule а также AuthModule ленивая нагрузка? Как?

Answer 1

Лениво загруженные модули не импортируются в app.module, Уберите их оттуда, иначе они не будут загружены ленивым. В вашем app.routing.ts вам нужно определить маршруты и лениво загрузить модули, используя что-то вроде:

const appRoutes: Routes = [ 
  { path: 'dashbobard', loadChildren: 'src/app/dash/dashmodule.module#DashModule' },
  // or use relative paths.
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule },
];

Если вы переключаете свое приложение на ленивую загрузку модулей, вам может потребоваться исправить некоторые из ваших маршрутов, например [routerLink]='[/some/route]'