Angular 2 RC1 component routing doesn't load anything

Question

I am using Angular 2.0.0-rc.1. I have tried to setup routing with a single route to start with, but nothing is being displayed. No errors are being thrown.

Main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { ROUTER_PROVIDERS } from '@angular/router';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

app.component.ts

import { Component } from '@angular/core';
import { MyComponent} from './my/my.component';
import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import 'rxjs/Rx';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [MyComponent, ROUTER_DIRECTIVES],
  providers: [HTTP_PROVIDERS]
})

@Routes([
  { path: '/', component: MyComponent }
])

export class AppComponent { }

app.component.html

<div>
    <router-outlet></router-outlet>
</div>

index.html starts with

<html>
<head>
  <base href="/">

MyComponent

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

@Component({
    selector: 'pr-my',
    templateUrl: 'app/my/my.component.html'
})

export class MyComponent {
}

UPDATE: If I add a routerLink into app.component.html and click it, the contents loads as expected. It doesn't load without clicking the link.

<a [routerLink]="['/']">Home</a>

The routerLink is another workaround to the one mentioned in my answer. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 4, 2016 at 7:34

Günter Zöchbauer · Accepted Answer · 2016-06-04 07:32:42Z

4

You need to inject the router

class AppComponent {
  constructor(router:Router){}
}

This is a known issue.

answered Jun 4, 2016 at 7:32

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Günter Zöchbauer Over a year ago

Glad it helped. If you have a routerLink in AppComponent you don't need to inject the router. I just find injecting the router less ugly than adding a routerLink and then making it invisible (if I actually don't need it). You might be better off sticking with router-deprecated for now. They are now again reconsidering how they move foreard with the router story.

Collectives™ on Stack Overflow

Angular 2 RC1 component routing doesn't load anything

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related