4
  • Angular Version: 2.1.0
  • Router Version: 3.1.0

I am learning routing in Angular 2 and the custom segments are not being appended to the URL when clicking the link nor does the component load.

Manually typing in the segments into the address bar does work and the component loads in <router-outlet></router-outlet> but instead of this I want it to work as expected - by clicking the link inside the routerLink directive.

I have followed the router documentation and am still having ill results.

Here is a very similar question but have come to find no solutions that work for me as of yet.

The two common solution I have come across are:

  • Misspelling 'routerLink' which is case sensitive
  • Not having <base href='/'> at the top of index.html

Also there are no errors in the console window in Chrome

So before continuing I just wanted cancel out the obvious solutions.

This is what I have done to configure my custom router:

1. Config custom routes (routes.ts)

import { Routes, RouterModule } from '@angular/router';
import { RecipesComponent } from './recipes/recipes.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';

//TODO Fix routing bug (not switching on click or displaying in URL)
export const APP_ROUTES: Routes = [
    {path: '', redirectTo: 'recipes', pathMatch: 'full'},
    {path: 'recipes', component: RecipesComponent},
    {path: 'shopping-list', component: ShoppingListComponent}
];

/*Set routing up for root of app*/
export const routing = RouterModule.forRoot(APP_ROUTES);

2. Import routes globally (app.module.ts)

import { routing } from './routes';//Custom routes file

    @NgModule({                     
      // Declarations removed for bravity
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing
      ],
      providers: [ShoppingListService],
      bootstrap: [AppComponent,]
    })
    export class AppModule { }

3. Supply the RouterOutlet Directive (app.component.html)

<rb-header></rb-header>
<div class="container">
  <router-outlet></router-outlet>
</div>

4. Implement routerLink with static segments (header.component.html)

<ul class="nav navbar-nav">
    <li><a routerLink="/recipes">Recipes</a></li>
    <li><a routerLink="/shopping-list">Shopping List</a></li>
</ul>

The router documentation says that using routerLink is for static segments and [routerLink] is for using params to pass. I have tried both approaches but they still pose the same outcome.

Community
  • 1
  • 1
ShadowCore
  • 311
  • 2
  • 5
  • 13

1 Answers1

0

I have finally resolved the problem.

What was the cause ?

An unrelated bug inside one of my component.html where there was a property that was assigning a string to an unknown property of 'name' - Angular 2 compiled the string interpolation before a 'recipe' object was set up.

<h4 class="list-group-item-heading">{{recipe.name}}</h4>

Fix

I used the safe navigaton operator which guards against nulls in property paths:

<h4 class="list-group-item-heading">{{recipe?.name}}</h4>

Conclusion

There was no bug in the routing - it was an error in another part of my application which was caught in chrome - dev tools which then needed to be fixed in order to continue compiling the app

ShadowCore
  • 311
  • 2
  • 5
  • 13