Constructor for eagerly loading module never called

36 Views Asked by At

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");
  }

}
0

There are 0 best solutions below