Angular2 routing, using TypeScript, has a compile error and get unexpected token Console error

Question

I am experimenting with Angular2 alpha35, using TypeScript 6.0.0. My index.html loads a headerFooter component. I then added router-outlet tags to it to insert several pages in between. The code at How to change router by typescript in angular2? helped to eliminate several errors, but after many hours of thrashing, I still get a TypeScript error in the @RouteConfig, namely ',' expected. at . . . ( the : right after component), and a Console error of unexpected @ token in the partial page component that it finds (the GET home.js is ok), but cannot load/insert. Here's relevant code. app.ts, index.html, and home.js are all in the same directory.

index.html

<residence-app><h1>Loading . . .</h1></residence-app>

app.ts

/// <reference path="../angular2-oPost/typings/angular2/angular2.d.ts" />
"use strict";
import { Component, View, bootstrap, Directive } from "angular2/angular2";
import { routerInjectables, routerDirectives, Router, RouterOutlet, RouteConfig, RouterLink } from 'angular2/router';
import { Home } from "home";
@Component({
  selector: 'residence-app'
})
@View({
  directives: [ RouterOutlet, RouterLink, Home ],
  templateUrl: "components/navigation/headerFooter.html",
  styleUrls: ['commonStyles/headerFooter.css']
})
@RouteConfig( [  {path: '/home', as:  component: Home } ] )
// TypeScript error  ',' expected.  at line 32 col48 ( : right after component), but a , causes 2 other errors
class ResidenceApp {
}
bootstrap( ResidenceApp,
  [
    routerInjectables
  ] );

headerFooter.html has several divs and the following tag to insert partial page components

<router-outlet></router-outlet>

home.js is the home page test component to insert in router-outlet in headerFooter.html

"use strict";
import { Component, View, bootstrap, Directive } from "angular2/angular2";
@Component({
//Error loading "home" from "app" at http://localhost/angular2-oPost/app.js
//http://localhost/angular2-oPost/home.js:3:1: Unexpected token @ (WARNING: non-Error used)"
  selector: "home"
})
@View({
  template: `<h1>Home page under construction</h1>
  <a router-link='home'>Home Page</a>`
})
class Home {
}
bootstrap( Home );

Answer 1

First, your route is broken

@RouteConfig( [  {path: '/home', as:  component: Home } ] )

You need to define the alias and make it CamelCase (technically PascalCase)

In addition the as parameter has been changed to name

@RouteConfig([{ path: '/home', name: 'Home', component: Home }])

Source:

• [email protected]/CHANGELOG.md
• [email protected]

Second, your router bootstrap is broken

bootstrap(ResidenceApp, [ routerInjectables ]);

routerInjectables has been replaced with ROUTER_PROVIDERS

bootstrap(ResidenceApp, [ ROUTER_PROVIDERS ]);

Source:

• [email protected]/CHANGELOG.md

Third, you need to provide a correct path to Home

import { Home } from "home";

import angular2/angular2 works because config.js contains an alias for it. config.js does not contain aliases to your project components (unless you add them manually) so you have to import via the relative path.

import { Home } from "./components/home";

Fourth, your routerLink won't work

<a routerLink='home'>Home Page</a>`

It has to point to the alias, using the correct one-way binding.

<a [routerLink]="['./Home']">Home Page</a>`

Note: The link in the routerLink expression points to the alias (ie name field defined in the route so it also needs to be CamelCase.

Source:

• angular2/router/router_link.ts

Fifth, you need to configure the Home component to include RouterLink

import { RouterLink } from 'angular2/router';
...
@View({
  directives: [ RouterLink ],
  template: `<h1>Home page under construction</h1>
  <a routerLink='home'>Home Page</a>`
})
class Home {
...

Phew... I think that's everything.

Aside: Lots of breaking changes have been recently made to the router so basically any examples available online are broken.

Update:

Keep an eye out. In a future version RouterOutlet/<router-outlet> will be replaced by RouterViewport/<router-viewport>.

Update2:

The Route as parameter has been changed to name

Source:

• angular/issues#4679

Update2:

Breaking change:

[router-link] -> [routerLink]

Thanks to @Mike Laird's comment.