I am trying to run a test application to understand how the routing in AngularJS2 works. I tried the following code:
/// <reference path="reference.ts" />
import { Component, View, bootstrap } from 'angular2/angular2'
import { Location, RouteConfig, RouterLink, Router, RouterOutlet } from 'angular2/router';
import { routerInjectables, Pipeline } from 'angular2/router';
import { Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/angular2';
import { DrinksService} from 'services'
import { Drinkers } from 'components/drinkers'
import { Drinks } from 'components/drinks'
import { Contact } from 'components/contact'
@Component({
selector: 'my-app'
})
@View({
directives: [RouterOutlet, RouterLink],
template: `
<nav>
<ul>
<li><a router-link="drinks">Drinks</a></li>
<li><a router-link="drinkers">Drinkers</a></li>
<li><a router-link="contact">Contact</a></li>
</ul>
</nav>
<main>
<router-outlet></router-outlet>
</main>
`
})
@RouteConfig([
{ path: '/', component: Contact, as: 'contact'},
{ path: '/drinks', component: Drinks, as: 'drinks'},
{ path: '/drinkers', component: Drinkers, as: 'drinkers'}
])
class MyAppComponent {
name:string
buttonName:string
showup:boolean
constructor(public router: Router) {
this.name = 'Alice and Bob'
this.buttonName = 'are going to see rabbit whole'
this.showup = true
}
goToDrink = () => {
alert('Sicher?')
this.showup = false
}
isVisible = () => {
return !this.showup
}
goToDrinkReally = () => {
this.router.parent.navigate('/home')
}
}
bootstrap(MyAppComponent, [routerInjectables])
index.html:
<!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="angular25minutes/angular25minutes.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<my-app></my-app>
<script>System.import('app')</script>
</body>
</html>
Everything compiles but in the browser I am getting empty screen. As html I can see only
<html><head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script><style type="text/css"></style>
<script src="https://jspm.io/system@0.16.js"></script><script type="text/javascript" src="https://jspm.io/es6-module-loader@0.16.6.js" data-init="upgradeSystemLoader"></script>
<script src="angular25minutes/angular25minutes.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<my-app></my-app>
<script>System.import('app')</script>
</body></html>
What am I doing wrong?
And sometimes after compilation in the console shows up following problem:
ORIGINAL EXCEPTION: No base href set. Either provide a binding to "appBaseHrefToken" or add a base element.
but it is quite random.
