如何在 Angular 10+ 中使用模块路由而不是组件

Question

I successfully used component in routing but when i am using module instead of component in angular 10 i am getting a white screen.

I would be really thankful for any kind of help.

this is what i've been trying: app-routing.module.ts

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

import { DashboardModule } from './components/dashboard/dashboard.module';

import { DashboardComponent } from './components/dashboard/dashboard.component';

const routes: Routes = [
    { path: '', loadChildren: () => DashboardModule }
];

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

Dashboard module:

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

import { DashboardComponent } from './dashboard.component';


@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule
  ]
})
export class DashboardModule { }

Dashboard Component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor() { 
    alert('asdf');  
  }

  ngOnInit(): void {
  }

}

Thanks

Answer 1

Lazy loaded feature modules have to have their child routes declared separately. For example:

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { DashboardComponent } from './dashboard.component';

    const routes: Routes = [
      {
        path: '',
        component: DashboardComponent,
      },
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class DashboardRoutingModule { }

Also make sure to always load lazy modules like Emilien said before :)

loadChildren: () => import('./components/dashboard/dashboard.module').then(m => m.DashboardModule)