Angular Routing not working, but dont show error

Question

I have a new angular project and routing not working, but dont show error.

When i try to "http://localhost:4200/dashboard" .It jumps to "http://localhost:4200". No Error

app.component.html

<main class="main">
  <div class="content">
   <span>{{title}}</span>
  </div>
</main>

<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { AppSharedModule } from './app-shared.module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'angular_basic_template';
}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';  // Import your root NgModule

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppSharedModule } from './app-shared.module';

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

app-shared.module.ts

// src/app/app-shared.module.ts
import { NgModule } from '@angular/core';
import { AuthModule } from './auth/auth.module';
import { CoreModule } from './core/core.module';
import { DashboardModule } from './features/dashboard/dashboard.module';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [
    BrowserModule,
    AuthModule,
    CoreModule,
    DashboardModule,
    AppRoutingModule,
  ],
  exports: [
    BrowserModule,
    AuthModule,
    CoreModule,
    DashboardModule,
    AppRoutingModule
  ]
})
export class AppSharedModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, RouterOutlet, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { AuthGuard } from './auth/guards/auth.guard';

const routes: Routes = [
    {
      path: 'dashboard',
      loadChildren: () => import('./features/dashboard/dashboard.module').then(m => m.DashboardModule),
      canActivate: [AuthGuard]
    },
    { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) },
    {
      path: '',
      redirectTo: 'dashboard',
      pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: 'auth/login',
        pathMatch: 'full'
    }
  ];

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

dashboard.module.ts

import { NgModule } from '@angular/core';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardService } from './services/dashboard.service';
import { DashboardOverviewComponent } from './components/overview/dashboard-overview.component';

@NgModule({
  declarations: [
    DashboardOverviewComponent
  ],
  imports: [
    DashboardRoutingModule
  ],
  exports:[DashboardRoutingModule],
  providers: [DashboardService]
})
export class DashboardModule { }

dashboard-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardOverviewComponent } from './components/overview/dashboard-overview.component';



const routes: Routes = [
  { path: '', redirectTo: 'overview', pathMatch: 'full' },
  { path: 'overview', component: DashboardOverviewComponent },
];

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