Angular is not displaying the components with lazyload

Question

I'm trying to create an app with Angular, i'm using lazyload. When I try to access localhost:4200 is not showing anything. Here is the code

app.routing.ts

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

const routes: Routes = [
    { path: '', loadChildren: './pages/lander/lander.module#LanderModule' },
];

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

This is my app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

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

This is the app.component.html

<router-outlet></router-outlet>

As you see, I'm trying to call a module called lander this will be the handler of the rest of components.

**This is the lander-routing.module.ts**
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LanderComponent } from './lander.component';

const routes: Routes = [
  { path: '', component: LanderComponent }
];

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

The lander.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// Material
import { MatGridListModule } from '@angular/material';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatMenuModule} from '@angular/material/menu';

import { LanderRoutingModule } from './lander-routing.module';
import { LanderComponent } from './lander.component';
import { RouterModule } from '@angular/router';



@NgModule({
  declarations: [LanderComponent],
  imports: [
    CommonModule,
    RouterModule,
    LanderRoutingModule,
    MatGridListModule,
    MatSidenavModule,
    MatMenuModule,
  ]
})
export class LanderModule { }

And at the end is coming the lander.component.html

<div class="container-fluid h-100 px-0">
  <mat-drawer-container class="drawer" [hasBackdrop]="true">
    <mat-drawer class="menubar" #drawer mode="over">
      <img class="avatar" src="https://www.teslarati.com/wp-content/uploads/2019/04/elon-musk-smiling-1.jpg">
      <h4 class="text-center mt-2">
        ELON MUSK<br>
        <small class="text-secondary">
          Chairman
        </small>
      </h4>
      <ul class="list-group mt-4">
        <li class="list-group-item active" routerLinkActive="active">
          <a [routerLink]="[ '/' ]">Dashboard</a>

        </li>
        <li class="list-group-item">Second item</li>
        <li class="list-group-item">Third item</li>
      </ul>
    </mat-drawer>

    <mat-drawer-content>
      <button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
      <router-outlet></router-outlet>
    </mat-drawer-content>
  </mat-drawer-container>
</div>

What is wrong with the structure?

Answer 1

Well, the first error that I see is the order of the imports in the modules. the Angular modules should be first (CommonModule, BrowserModule, FormsModule). Then if you have the "moduleA" that uses the "moduleB", so the order should be imported: [moduleB, moduleA].

Second, you are importing the Router Module twice in each module. You are already importing the RouterModule with the AppRoutingModule, so you don't have to import in the AppModule. Also, you are making the same mistake in the LanderModule.

Here you have the corrections:

app.routing.ts it's fine.

** app.module.ts**

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

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

LanderRoutingModule it's fine

The lander.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// Material
import { MatGridListModule } from '@angular/material';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatMenuModule} from '@angular/material/menu';

import { LanderRoutingModule } from './lander-routing.module';
import { LanderComponent } from './lander.component';
import { RouterModule } from '@angular/router';



@NgModule({
  declarations: [LanderComponent],
  imports: [
    CommonModule,
    MatGridListModule,
    MatSidenavModule,
    MatMenuModule,
    LanderRoutingModule
  ]
})
export class LanderModule { }

Try now if it run good.