Angular Routing not working, but dont show error

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 { }

Continue reading...