Angular2 + Typescript1.5 Routing

Question

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/[email protected]/traceur-runtime.js"></script>
    <script src="https://jspm.io/[email protected]"></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/[email protected]/traceur-runtime.js"></script><style type="text/css"></style>
    <script src="https://jspm.io/[email protected]"></script><script type="text/javascript" src="https://jspm.io/[email protected]" 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.

Thanks it works now. Btw this router can be used also with angular1, can't it? — Łukasz Rzeszotarski
– Łukasz Rzeszotarski, Commented Aug 13, 2015 at 20:18
Do you have base href set in html head? Example: <head><base href="/"></head> — Imants Volkovs
– Imants Volkovs, Commented Feb 21, 2017 at 10:27

Evan Plaice · Accepted Answer · 2015-11-01 12:08:39Z

4

A few issues here:

It doesn't seem that you're loading the router files. They can be found at code.angularjs.org, among other places.

For a more complete view on how to use the Angular 2 router checkout the Meteor-Angular2 Tutorial.

Currently the default HTML5LocationStrategy seems to have a lot of issues, I would suggest setting the HashLocationStrategy in your app.

In your root app file, import the necessary files:

import {
  Component,
  View,
  bootstrap,
  provide
} from 'angular2/angular2'
import {
  LocationStrategy,
  HashLocationStrategy
  ROUTER_PROVIDERS,
} from 'angular2/router';

Then bind to the location when bootstrapping:

bootstrap(MyAppComponent, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy).toClass(HashLocationStrategy)
]);

Update

routerInjectables was changed to ROUTER_PROVIDERS
bind was changed to provide

Source:

[email protected]/CHANGELOG.md

edited Nov 1, 2015 at 12:08

Evan Plaice

14.2k6 gold badges78 silver badges95 bronze badges

answered Aug 14, 2015 at 6:52

shmck

5,6794 gold badges20 silver badges29 bronze badges

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

2 Comments

Łukasz Rzeszotarski Over a year ago

Finally I managed to configure it. You can see my project here github.com/lrzeszotarski/angular2-in-5minutes. Thanks for the answer.

Gary Eberhart Over a year ago

It appears the provide method has changed in the beta release. Try this. bootstrap(MyAppComponent, [ ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy}) ]);

Collectives™ on Stack Overflow

Angular2 + Typescript1.5 Routing

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related