Why is the angular router fetching the lazy loaded module at startup?

Question

I am trying to set a new Angular project with Angular 7 version. I have created a CoreModule which contains components like Login Page, Forgot Password page etc.

Initially the application should pick app-routing.module and should display the login page etc. Only when the user is validated and I call home URL programtically, the CoreModule should be lazy loaded which has its own routing to display various pages in the application.

However currently, as the application loads for the url localhost:4200, the app shows a page mentioned in module inside CoreModule despite the fact that CoreModule is lazy loaded.

Why is this happening? Can someone please help me know what is that I am doing wrong.

Below are my various related file. I have just started it so the code is minimal. Please have a look and let me know if anything else is needed to apprehend.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './core/components/login/login.component';

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'home',
    loadChildren: './core/core.module#CoreModule',
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CoreModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { WagonnHeaderComponent } from './components/wagon-header/wagon-header.component';
import { CoreRoutingModule } from './core-routing.module';

@NgModule({
  declarations: [
    WagonnHeaderComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    CoreRoutingModule
  ],
  exports: [
    WagonnHeaderComponent
  ]
})
// this is the core module for our app. All the components or services
// whose single instance is required shall be exported from this module
export class CoreModule {

  // prevents multiple imports of this module
  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule has already been loaded. You should only import Core modules in the AppModule.');
    }
  }

 }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

const coreRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'home/dashboard',
        loadChildren: '../dashboard/dashboard.module#DashboardModule'
      }
    ]
  }
];

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

The page I am seeing on startup at localhost:4200 is the html that is written in home.component.html while I expect to see the one written in login.component.html.

Answer 1

Angular docs says:

A lazy-loaded routed feature module should not be imported by any module. Doing so would trigger an eager load, defeating the purpose of lazy loading.

It happens because you have imported CoreModule in AppModule.

Quote comes from:
https://angular.io/guide/module-types
and also can be useful:
https://angular.io/guide/lazy-loading-ngmodules