Loutocký Loutocký - 5 months ago 12
AngularJS Question

routerLink inside Component does NOT generate content

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

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

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<!--<script src="node_modules/es6-shim/es6-shim.js"></script>-->
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- if NOT included, does not work in IE-->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<!--Http module-->
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<!-- Routing -->
<script src="node_modules/angular2/bundles/router.dev.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<link href="app/css/jquery-ui.css" rel="stylesheet">
<link href="app/css/bootstrap.min.css" rel="stylesheet">
<link href="app/css/font-awesome.min.css" rel="stylesheet">
<link href="app/css/style.css" rel="stylesheet">
<link href="app/css/jquery-ui-timepicker-addon.css" rel="stylesheet">

<script src="app/js/jquery.min.js"></script>
<script src="app/js/jquery-ui.min.js"></script>
<script src="app/js/jquery-ui-timepicker-addon.js"></script>
<script src="app/js/jquery-ui-sliderAccess.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="app/js/bootstrap.min.js"></script>

<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/ts/main.component').then(null, console.error.bind(console));
</script>
</head>

<!-- 3. Display the application -->

<body>
<zds>Loading...</zds>
</body>

</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

<div>
<div class="content">
<div class="process-bar" *ngIf="submenuEnabled">
<div class="steps" style="margin-top:10px;margin-bottom:20px;">
<a [routerLink]="['Ticket']" class="active">{{ticket}}</a>
<a [routerLink]="['Payment']">{{payment}}</a>
<a [routerLink]="['Receipt']">{{receipt}}</a>
</div>
</div>

<div id="process-container">
<router-outlet></router-outlet>
</div>
</div>
</div>


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

<div class="welcome">
<h3>{{welcomeTitle}}</h3>
<div>{{welcomeDescription}}</div>
<div class="bottom-text">{{welcomeBuyText}}</div>
</div>

<div class="buttons-footer">
<div>
<a [routerLink]="['Test']" class="btn btn-main btn-large"><i class="glyphicon glyphicon-ok"></i>{{welcomeBuyTicket}}</a>
</div>
</div>


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: `<p>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.</p>`,
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

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.