Angular 2 routerLink not working inside router-outlet

Question

My routerLink work outside of my the router-outlet in the navigation component but when I have a page that is within the router-outlet that has a routerlink to a different page I get an error.

browser_adapter.ts:82 TypeError: Cannot read property 'startsWith' of undefined
at UrlParser.parseRootSegment (url_tree.ts:301)
at DefaultUrlSerializer.parse (url_tree.ts:196)
at Router.navigateByUrl (router.ts:242)
at RouterLinkWithHref.onClick (router_link.ts:90)
at DebugAppView._View_ProfileFeedComponent0._handle_click_12_0 (ProfileFeedComponent.template.js:381)
at eval (view.ts:406)
at eval (dom_renderer.ts:274)
at eval (dom_events.ts:20)
at ZoneDelegate.invoke (zone.js:323)
at Object.onInvoke (ng_zone_impl.ts:72)

My router is a basic router.

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { HomeComponent } from "./home/home.component";
import {ProfileFeedComponent} from "./profileFeed/profileFeed.component";
import {QuestionComponent} from "./questions/question.component";
import {QuestionAskComponent} from "./questionAsk/questionAsk.component";


export const routes: RouterConfig = [
  {path: '', component: HomeComponent,  pathMatch: 'full'},
  {path: 'profile-feed', component: ProfileFeedComponent},
  {path: 'question', component: QuestionComponent},
  {path: 'question/ask', component: QuestionAskComponent},

];

export const appRouterProviders = [ provideRouter(routes) ];

export const appRouterProviders = [
  provideRouter(routes)
];

app.component.html

<navigation></navigation>

<div class="wrapper">
    <router-outlet></router-outlet>
</div>

app.component.ts

@Component({
  moduleId: module.id,
  selector: "my-app",
  templateUrl: "app.component.html",
  directives: [ ROUTER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES, NavigationComponent],
   })
export class AppComponent {
 public viewContainerRef : ViewContainerRef;
 public constructor(viewContainerRef:ViewContainerRef) {
    // You need this small hack in order to catch application root view container ref
     this.viewContainerRef = viewContainerRef;
 }
}
//ALL IMPORTS ARE PROPERLY INCLUDED IN THIS FILE

The problem is in this component I believe I just want to have the option to go to a different page within this page, seems straightforward not sure why it is not working. The below page would be inserted into the router-outlet from the menubar navigation. The link('/questions/ask') within this file is not available in the menu bar.

profileFeed.component.ts

import {Component} from "@angular/core";
import {ROUTER_DIRECTIVES, RouterLink, Router} from "@angular/router";


import {ProfileInfoComponent} from "../profileInfo/profileInfo.component";

@Component({
  moduleId: module.id,
  selector: 'profile-feed',
  templateUrl: 'profileFeed.component.html',
  styleUrls: ['profileFeed.component.css'],
  directives: [
    ProfileInfoComponent,
    RouterLink,
    ROUTER_DIRECTIVES
  ]
})
export class ProfileFeedComponent {

}

profileFeed.component.html

<div class="profile-feed-container container">
  <div class="profile-detail-summary container-fluid">
    <profile-info></profile-info>
    <hr>
    <div class="container-fluid">
        <div class="container-fluid">
            <a class="btn btn-default" routerLink='/question/ask'>Ask a Question</a>
        </div>
    </div>
  </div>
</div>

I believe in order to route within a routed component, you have to implement child routing. — Bean0341
Even if it to just a another route? I was able to perfome this in the aplha.7 of this router version. — pwborodich
you are best off just re configuring your router, to the most current version, and follow the official angular.io docs for routing. they discuss this subject thoroughly. Also you will be following the best angular practice for routing. — Bean0341

Travis Alexander Terrell Travis Alexander Terrell · Accepted Answer · 2018-12-26T21:55:26

The workaround I found to work is use a click method on the link and set a method inside the component's ts file to go to the route needed by using the Router class' navigateByUrl() method. Example:

Component.ts file

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  goToLoginPage() {
    this.router.navigateByUrl("");
  }

}

Component.html link

<p>Have an account? <a (click)="goToLoginPage()" class="signup">Sign in</a></p>

The page doesn't fully refresh it acts as if it were a regular <router-outlet> link. I also looked at the network tab and didn't see any new items appear.

Angular 2 routerLink not working inside router-outlet

1 Answers