翻译I'm an Angular newb and build a simple one pager. I have the router setup so that the empty url redirects to Dashboard component. Hence localhost:4200 will automatically route to localhost:4200/dashboard Perfect.
However, if I click the refresh button then it appends another dashboard to the url, and oddly enough the page actually loads fine. localhost:4200/dashboard/dashboard
If I hit refresh again it adds a another dashboard to the url and now it won't load
localhost:4200/dashboard/dashboard/dashboardThe question being, why does it keep adding '/dashboard' to my url on every page refresh?
Here is routing.module.ts
import { Routes, RouterModule } from '@angular/router'; import { DashboardComponent } from '../_feature/iacuc/dashboard.component'; const appRoutes: Routes = [ { path: '', redirectTo: 'dashboard', pathMatch: 'prefix' }, { path: 'dashboard', component: DashboardComponent } // otherwise redirect to home { path: '**', redirectTo: '' } ]; export const Routing = RouterModule.forRoot(appRoutes);Here is my index.html
<!DOCTYPE html> <html> <head> <base href="/" > <title>Angular 2 JWT Authentication Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bootstrap css --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <!-- application css --> <link href="app.css" rel="stylesheet" /> <!-- polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function (err) { console.error(err); }); </script> </head> <body> <app>Loading...</app> </body> </html>The rest of the code is boilerplate you see in the introductory examples, but I can show more code if it's helpful.
Thanks.