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

Answer 1

As LLai said in his answer, to prevent reloading, you should not use href atribute from the <a> tag, but instead use AngularRouter and his routerLink directive.

So, remove the href attribute from your <a> tags and use routerLink like this:

<a class="list-group-item" [routerLink]="['login']"></a>

Cheers. :)

Answer 2

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.