'router-outlet' not working without a 'routerLink' on the main template

19,258

Solution 1

That's a known issue in the new RC router.

Alternatively you can also do

export class MyprojAppComponent {
  constructor(router:Router) {}

One of these workarounds is necessary to get the router invoked.

Solution 2

I struggled few hours with returned empty [routerLink]. There was no error on console. I had to add <base href="/"> on header of index.html. It worked after that.

Solution 3

As Gunter said, this is a known bug with the current RC (here's one of several issues on it: https://github.com/angular/angular-cli/issues/989). The approach that the angular tutorial and many others are taking right now is to use @angular/router-deprecated. Starting from just after ng new myproj and ng g route user, you'll need to do the following:

npm install --save @angular/router-deprecated
In src/system-config.ts, change @angular/router to @angular/router-deprecated in the barrels array.
In src//app/myproj.component.ts, change:
1. Routes to RouteConfig in the import line
2. '@angular/router' to '@angular/router-deprecated' in the import line
3. @Routes to @RouteConfig for the decorator
4. Add the property name: 'User' to the RouteConfig object for /user

Also, note that for links in the pre-RC router you do <a [routerLink]="['User']">User Info</a> (i.e. reference the name rather than the path).

19,258

Author by

Andre Soares

C# developer.

Updated on June 23, 2022

Comments

Andre Soares almost 2 years

I've just created a new angular project using the Angular CLI and scaffolded a new route user in it using the following commands.

ng new myproj
cd myproj 
ng g route user

And then I ran the Angular CLI server using ng serve.

But I can't see the content of the login template when I access the page /login unless I add a link to some route, i.e:

<a [routerLink]="['/user']">User Info</a>

When I add the line above, then the router-outlet gets filled, but if I strip out this line, then the router-outlet renders empty again.

What's happening here?

Does someone know why is this happening?

Example files

/src/app/myproj.component.ts

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'myproj-app',
  templateUrl: 'myproj.component.html',
  styleUrls: ['myproj.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS]
})
@Routes([
  {path: '/user', component: UserComponent}
])
export class MyprojAppComponent {
  title = 'Main Component working!';
}

/src/app/myproj.component.html

<h1>{{title}}</h1>
<router-outlet></router-outlet>

And the non-understandable workaround

<a [routerLink]="['/user']">User Info</a>

/src/app/+user/user.component.ts

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

@Component({
  moduleId: module.id,
  selector: 'app-user',
  templateUrl: 'user.component.html',
  styleUrls: ['user.component.css']
})
export class UserComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

/src/app/+user/user.component.html

<p>
  It should be showing but it isn't!
</p>

Pankaj Parkar almost 8 years

I also had similar issue, the suggested solution didn't work for me too.. any other thing I might missing?
Günter Zöchbauer almost 8 years

Hard to tell. Can you provide a Plunker to reproduce? Switching to the new RC router is currently not adviceable anyway. It's likely they'll ship yet another router soon.
Pankaj Parkar almost 8 years

The funny thing is, @angular/router-deprecated wasn't working, though will add a plunkr in my night time.. Thanks :)
Andre Soares almost 8 years

Worked like a charm! Thanks dude!
Andre Soares almost 8 years

Thanks for your answer. I knew this way, but I was trying/intending to use the new routing system.
Pankaj Parkar almost 8 years

@GünterZöchbauer I started my application back from scratch, so that made it working(I must have missed something silly before), Thanks :)
Enamul Hassan almost 8 years

This is really a comment, not an answer. With a bit more rep, you will be able to post comments.
CounterFlame over 7 years

Well, doing exactly this fixed it for me, so a good comment then ;)
Danny Yassine over 7 years

thank you, this solved my issue. And my attribute had to like this: <a routerLink="/courses">Courses</a>
tryingToLearn about 6 years

If I change, base href to something other than '/', it does not work. In my deployment, the app is not deployed on '/' but some path like '/webapp'