Guy do you know why angular duplicate my home endpoint when I reload the page.

When I load my page for the first time all is right, the home endpoint is set in the URL, but when I reload the page in the url is added another /home.

before reload the page: http://localhost:4200/home

after reload the page: http://localhost:4200/home/home

this is my appRoutes

import { Route } from "@angular/router";

export const AppRoutes:Route[] = [
    {
        path:'', redirectTo:'home', pathMatch:'full'
    },
    {
        path:'home', loadChildren: ()=> import("./modules/home/home.module").then(m=>m.HomeModule)
    }
]

I import this file in my appModule

RouterModule.forRoot(AppRoutes)

And this my Home route file

import { Route } from "@angular/router";
import { HomeComponent } from "./home.component";

export const HomeRoutes:Route[] = [
    {
        path:'',
        component:HomeComponent
    }
]

I import this file in my HomeModule

RouterModule.forChild(HomeRoutes)

CodePudding user response：

1. In index.html add <base href="/"> instead of <base href=""> if its not there.

2. If it doesn't help, try turning on route tracing and debug.

   RouterModule.forRoot( AppRoutes, { enableTracing: true } // <-- For debugging purpose only )

CodePudding user response：

your routing configuration is correct.

this link in below is created in stackblitz base on your config.

click here

you have to find your problem some where else.