Menu
The routing works perfectly if one click on any of the anchor tags. The problem occurs only if the user manually types the url on the address bar
For example,
If one click on sign in link from the top navigation bar of the web page, then angular is correctly loading the sign in component, but if the user types http://localhost:4200/sign-in, it loads the home component
Specification
Ubuntu 17.10 Node 6.11.4 NPM 5.5.1
The code of the application is below
src/app/app.router.ts
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { SignInComponent } from './sign-in/sign-in.component';
import { HomeComponent } from './home/home.component';
import { Route } from '@angular/router';
export const routes: Route[] = [
{ path: 'sign-up', component: SignUpComponent},
{ path: 'sign-in', component: SignInComponent},
{ path: 'admin', pathMatch: 'full', loadChildren: 'app/admin/admin.module#AdminModule'},
{ path: 'dashboard', loadChildren: 'app/user/user.module#UserModule'},
{ path: '', pathMatch: 'full', component: HomeComponent},
{ path: '**', pathMatch: 'full', component: PageNotFoundComponent}
];
src/app/app.component.html
<top-navigation></top-navigation>
<router-outlet></router-outlet>
src/app/shared/top-navigation/top-navigation.component.html
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">RS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li *ngIf="isLoggedIn" class="nav-item">
<a class="nav-link" [routerLink]="['/dashboard']" >Dashboard</a>
</li>
</ul>
<!-- SIGNED IN USER -->
<div *ngIf="isLoggedIn" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{currentUser.username}}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" routerLink="/me" routerLinkActive="active">Me</a>
<a class="nav-link disabled" href="#">Disabled</a>
<a class="nav-link" (click)="authService.logout()">Logout</a>
</div>
</div> <!-- [/END] SIGNED IN USER -->
<!-- NO USER -->
<div *ngIf="!isLoggedIn" class="nav-item">
<a class="nav-link" [routerLink]="['/admin']">Sign In</a>
</div>
</div>
</nav>
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
569
Set the config router to useHash or make url rewrite.
Following the command to solve this situatoin that rewrite (manage state).
$ npm install http-server -g
$ npm install -g spa-http-server
$ http-server --push-state
# ↑ it would solve the state flush problem.
Another way, use {useHash:true,enableTracing:true} in your RouterModule config.
config = {useHash:true,enableTracing:true};
imports:[RouterModule.forRoot(routes,config),]
This is not specific to your problem but you should remove href="#" from links. Can you try this. Instead of { path: '', pathMatch: 'full', component: HomeComponent},
try like this
{ path:'home', component: 'HomeComponent' }
{ path: '', redirectTo: 'home', pathMatch: 'full' }.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
