Routing always reloads the page

Question

When I navigate using routes from 1 component to the next, angular always reloads the application. Order of events:

load home page (locahost:4200)
redirects to locations (localhost:4200/locations)
click button routes to (localhost:4200/items/1)
displays item page
then it automatically routes to (localhost:4200/#) [how can I stop it from doing this?]
and then it routes back to locations (localhost:4200/locations)

Thoughts on what is wrong and why it does't stop on the items page? I've been pulling my hair out (what little is left) trying to figure out something that I'm sure is a simple user error.

Also, there are not errors in the chrome console or in the webstorm terminal. I'm using angular 4.2.4.

Here are my components:

AppModule

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';

import {AppComponent} from './app.component';
import {LocationComponent } from './location/location.component';
import {ItemsComponent } from './items/items.component';

import {AppRoutingModule} from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    LocationComponent,
    ItemsComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppRouting

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ItemsComponent } from './items/items.component';
import {LocationComponent} from './location/location.component';

const routes: Routes = [
  { path: 'locations',  component: LocationComponent },
  { path: 'items/:id',  component: ItemsComponent },
  { path: '', redirectTo: '/locations', pathMatch: 'full' }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes,  { enableTracing: true }) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

AppComponent

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>Hello</div><router-outlet></router-outlet>`
})
export class AppComponent { }

LocationComponent

import {Component, OnInit} from '@angular/core';
import {LocationModel} from './location.model';
import {Router} from '@angular/router';

@Component({
  templateUrl: './location.component.html',
  styleUrls: ['./location.component.css']
})
export class LocationComponent implements OnInit {

  locations: LocationModel[];
  location: LocationModel;

  constructor(private router: Router) {
    this.locations = [
      {id: 1, name: 'Loc1'},
      {id: 2, name: 'Loc2'},
      {id: 3, name: 'Loc3'},
      {id: 4, name: 'Loc4'}
    ];
  }

  ngOnInit() {
  }

  onSelect(loc: LocationModel): void {
    this.location = loc;
    console.log('onSelect for loc.id[' + this.location.id + ']');
    window.alert('onSelect for loc.id[' + this.location.id + ']');
    this.router.navigate(['/items', this.location.id]);
  }
}

Location - HTML

<nav class="navbar navbar-fixed-top">
  <a class="navbar-brand" href="do_nothing">CO_ICON</a>

  <div class="nav navbar-nav">
    <a class="nav-item nav-link active" href="do_nothing">
      <div>Add</div>
    </a>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <!-- /.card -->
      <div class="card" *ngFor="let location of locations" (click)="onSelect(location)">
        <div class="card-block">
          <div class="list-group">
            <a href="do_nothing" class="list-group-item">{{location.name}}</a>
          </div>
        </div>
      </div>
      <!-- /.card -->
    </div>
  </div>

ItemComponent

import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import {ItemModel} from './item.model';
// import {ItemService} from './item.service';
import {ActivatedRoute, ParamMap} from '@angular/router';

@Component({
  templateUrl: './items.component.html',
  styleUrls: ['./items.component.css']
})
export class ItemsComponent implements OnInit {

  items: ItemModel[];

  constructor(
    // private itemService: ItemService,
    private route: ActivatedRoute) {
    console.log('constructed ItemsComponent');
    // window.alert('constructed ItemsComponent');
    this.items = [
      {id: 1, location: 1, name: 'Item 1', quantity: 1},
      {id: 2, location: 1, name: 'Item 2', quantity: 2},
      {id: 3, location: 2, name: 'Item 3', quantity: 1},
      {id: 4, location: 1, name: 'Item 4', quantity: 2}
    ];
  }

  ngOnInit() {
    // this.route.paramMap
    //   .switchMap((params: ParamMap) => this.itemService.getItems(+params.get('id')))
    //   .subscribe(list => this.items = list);

    console.log('ngOnInit for is with 1 - A');
    window.alert('ngOnInit for is with 1 - A');
  }

}

Item - HTML

<nav class="navbar navbar-fixed-top">
  <a class="navbar-brand" href="do_nothing">CO_ICON</a>

  <div class="nav navbar-nav">
    <a class="nav-item nav-link active" href="do_nothing">
      Add Item
    </a>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <!-- /.card -->
      <div class="card" *ngFor="let item of items">
        <div class="card-block">
          <div class="list-group">
            <a href="do_nothing" class="list-group-item">{{item.name}}</a>
          </div>
        </div>
      </div>
      <!-- /.card -->
    </div>
  </div>

Any help is much appreciated! Thanks!

Chris....

Try removing href="#" this is causing the app to reload. If you are wanting the hash, try using angulars fragment directive — LLai
Ah - that is the crux of the problem. I don't have a # anywhere. Angular is doing this automatically. Thoughts on where to remove it from or is there a configuration directive to set? — Chris
You don't have href="#" in your anchor tags like in the HTML you posted? — LLai

LLai LLai · Accepted Answer · 2017-10-01T22:24:56

Remove the href="#" from your anchor tags. The native html href attribute causes angular to reload. Angular navigation should be handled by the router directives and service.

Routing always reloads the page

3 Answers