routerLink inside Component does NOT generate content

Question

I am trying lot of hours to generate html content from component, but this component is generated from AppCompoment. So I want generate content from component with routerLink. I will show the example below. Know how about this solution I got from pluralsight.com tutorial with DeborahK and my source code is the same as this https://github.com/DeborahK/Angular2-GettingStarted/blob/master/APM - Final. Ok, so lets explain my code.

I have main index.html

This index.html loads my main.component, the content of main.component is

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent)
    .then(success => console.log("Bootstrap loaded successfully..."))
    .catch(error => console.log(error));

Ok, this code loads my app.component.ts

import { Component, OnInit } from "angular2/core";
import { HTTP_PROVIDERS } from "angular2/http";
import 'rxjs/Rx';   // Load all features
import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';

import {NavbarComponent} from "./navbar.component";
import {WelcomeComponent} from "./welcome.component";
import {TicketComponent} from "./ticket.component";
import {PaymentComponent} from "./payment.component";
import {ReceiptComponent} from "./receipt.component";
import {TestComponent} from "./test";

@Component({
    selector: 'zds',
    templateUrl: 'app/html/app.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [HTTP_PROVIDERS, ROUTER_PROVIDERS]
})

@RouteConfig([
    { path: '/', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
    { path: '/ticket', name: 'Ticket', component: TicketComponent },
    { path: '/payment', name: 'Payment', component: PaymentComponent },
    { path: '/receipt', name: 'Receipt', component: ReceiptComponent },
    { path: '/test', name: 'Test', component: TestComponent }
])

export class AppComponent {
}

Ok, my app.html is


    
        
            
                {{ticket}}
                {{payment}}
                {{receipt}}

After this, the welcome page is displayed, there is no problem. The routes from submenu is working, there is problem with routerLink inside component. The welcome page has the button, see the welcome.html below


    {{welcomeTitle}}
    {{welcomeDescription}}
    {{welcomeBuyText}}



    
        {{welcomeBuyTicket}}

And the welcome.component.ts for welcome.html page, very simple:

import {Component, OnInit} from "angular2/core";
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from "angular2/router";
import { Router } from 'angular2/router';

@Component({
    //selector: 'welcome',
    templateUrl: 'app/html/welcome.html',
    providers: [ROUTER_PROVIDERS],
    directives: [ROUTER_DIRECTIVES]
})

export class WelcomeComponent implements OnInit {
    welcomeBuyTicket = "Buy ticket";
    //other string contants from html

    constructor() {  }

    ngOnInit() {

    }

}

I want, for example, that my button on welcome.html routes me to Test component (html page). So I have [routerLink]="['Test']", test.component.ts already exists. The component with template is

import { Component, OnInit }  from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';

@Component({
    template: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet metus tortor. Suspendisse tempus sed ipsum sed auctor. Cras suscipit metus tortor, ac accumsan sem pharetra a. Proin ac eleifend elit, nec efficitur odio. Vivamus mattis laoreet turpis at vehicula. Donec commodo ipsum velit, sed maximus justo accumsan vitae. Phasellus rhoncus risus quam, vel egestas sem lobortis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec laoreet est est, at pharetra dolor fringilla dictum. Nam dignissim velit nisl, quis placerat ex lacinia aliquam. Ut fermentum a est ullamcorper rutrum. Cras vitae nulla laoreet, interdum lorem a, blandit mauris.`,
    directives: [ROUTER_DIRECTIVES]
})

export class TestComponent implements OnInit {

    constructor() {
    }

    ngOnInit(): void {
    }
}

So now, when I click on the button on welcome.html the URL is changed to localhost:3000/test, but the content on the page is still welcome.html, there is NO any lorem ipsum page, only URL is OK, but the content is not regenerated. Console not showing any errors. My code is very similar to DeborahK from Github (her code is working), I spent a lot of time on this problem - HOW TO ROUTE INSIDE COMPONENT and now I have not got any idea, what I am doing wrong.

Thank you all

G&#252;nter Z&#246;chbauer · Accepted Answer

Don't add providers: [ROUTER_PROVIDERS], more than once and only in bootstrap() or the root component but not on any additional component.

Adding ROUTER_PROVIDERS more than once breaks routing.

The new RC.3 router requires ROUTER_PROVIDERS in bootstrap(). Adding it to the root component is not supported.

routerLink inside Component does NOT generate content

Answers (1)

Related Questions