CODEWITHSUNDEEP
routesangular8angular-routing
Usr
Usr

Reputation: 2848

Angular 8 duplicated path when navigating to page

I have a simple application with two pages with lazy loading. Whenever I navigate to a page or make a change to the app the path is duplicated, then if I make another change to the app it doesn't load anything and I see a blank page.
app-routing.module is:

{ path: '', redirectTo: "first-page", pathMatch: "full" },
{ path: 'first-page', loadChildren: () => import('./pages/first-page/first-page.module').then(m => m.FirstPageModule) },
{
    path: "second-page",
    loadChildren: () => import('./pages/second-page/second-page.module').then(m => m.SecondPageModule)
},
{ path: '**', redirectTo: '' }

If I open my window on localhost:4200 it navigates to first-page, correctly. The url is localhost:4200/first-page. Then if I make a change in the app causing the reload, the url becomes localhost:4200/first-page/first-page, and I still can see my page correctly. But if I make another change and the app reloads, then I get a white page with the url being localhost:4200/first-page/first-page, and the only thing I can do is to delete the path and reload the page.
The same thing happens if I navigate directly to localhost:4200/first-page: it duplicates the path and then if I change something in the app I get the blank page.
Why is it duplicating the path?

Upvotes: 3

Views: 898

Answers (1)

Douglas M. Barcellos
Douglas M. Barcellos

Reputation: 158

Fixed this behavior by removing the --base-href parameter from my command:

ng serve --base-href -> ng serve

Upvotes: 1

Related Questions