Geek Answers Handbook

Any URL specified in the address bar will go back to the root URL in Angular 4

Routing works fine if you click on any of the anchor labels. The problem only occurs if the user manually enters the URL in the address bar

For example, if you click sign in link on the top navigation bar of a web page, then angular will load the sign in component correctly, but if the user types http://localhost:4200/sign-in , it will load the home component

Specification

Ubuntu 17.10 Node 6.11.4 NPM 5.5.1

Application code below

SIC / application / 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} ];

SIC / application / app.component.html

 <top-navigation></top-navigation> <router-outlet></router-outlet>

SIC / application / 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>

SIC / 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>
+7
angular angular-ui-router
source share
3 answers

Set the router configuration to useHash or enter url rewrite .

Following the command to solve this situation, <<22> (control state).

 $ npm install http-server -g $ npm install -g spa-http-server $ http-server --push-state # ↑ it would solve the state flush problem.

{useHash:true,enableTracing:true} , use {useHash:true,enableTracing:true} in the RouterModule configuration.

 config = {useHash:true,enableTracing:true}; imports:[RouterModule.forRoot(routes,config),]
+1
source share

This does not apply to your problem, but you must remove href="#" from the links. Can you try this. Instead of { path: '', pathMatch: 'full', component: HomeComponent}, try like this { path:'home', component: 'HomeComponent' } { path: '', redirectTo: 'home', pathMatch: 'full' } .

+1
source share

I believe that you have not added the base element to your index.html.

According to the Angular documentation, you should add the <base> element in index.html as the first child element in the tag to tell the router how to compose navigation URLs.

 <base href="/">
-one
source share

More articles:


All Articles