CODEWITHSUNDEEP
angularroutes
user441058
user441058

Reputation: 1278

Angular4 refresh page repeats page in url

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/dashboard

The 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.

Upvotes: 2

Views: 2210

Answers (1)

micronyks
micronyks

Reputation: 55443

Need to use pathMatch: 'full' instead of pathMatch: 'prefix'

read here: https://angular.io/api/router/Routes

Upvotes: 2

Related Questions