I have two eagerly loading modules using two different technique.
The problem is that I never see constructor CustomersModule called and I see OrdersModule constructor called only if I press Orders button (as if it was lazy loading module)
This is my app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomersComponent } from './customers/customers.component';
import { OrdersModule } from './orders/orders.module';
import { CustomersModule } from './customers/customers.module';
const routes: Routes = [
{ path: 'customers', component: CustomersComponent },
{ path: 'orders', loadChildren: () => OrdersModule }];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
This is my app.component.html:
<h1>
{{title}}
</h1>
<button type="button" [routerLink]="['customers']">Customers</button>
<button type="button" [routerLink]="['orders', { outlets:{ outlet1: ['ord'] }}]">Orders</button>
<button type="button" [routerLink]="">Home</button>
<router-outlet></router-outlet>
<div><router-outlet name="outlet1"></router-outlet></div>
<div><router-outlet name="outlet2"></router-outlet></div>
This is my orders-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OrdersComponent } from './orders.component';
const routes: Routes = [{ path: 'ord', component: OrdersComponent, outlet: "outlet1" }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OrdersRoutingModule { }
This is my order.module.tss
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrdersRoutingModule } from './orders-routing.module';
import { OrdersComponent } from './orders.component';
@NgModule({
declarations: [
OrdersComponent
],
imports: [
CommonModule,
OrdersRoutingModule
]
})
export class OrdersModule {
constructor() {
console.log("OrdersModule loaded");
}
}
This is my customer-routing.modules.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OrdersComponent } from './orders.component';
const routes: Routes = [{ path: 'ord', component: OrdersComponent, outlet: "outlet1" }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OrdersRoutingModule { }
This is my customer.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomersComponent } from './customers.component';
@NgModule({
declarations: [
CustomersComponent
],
imports: [
CommonModule,
CustomersRoutingModule
]
})
export class CustomersModule {
constructor() {
console.log("CustomersModule loaded");
}
}