4

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 );
Improve this question
8
  • In this line {path: '/home', as: component: Home } you are missing the as:. It should be something like this : {path: '/home', as: 'alias', component: Home }. And your second error is most likely a configuration issue since it doesn't recognize the annotations. Commented Sep 2, 2015 at 0:32
  • Eric, thanks - got some progress. The as: 'alias' worked and the odd TypeScript error is gone. Yes, it seems to not recognize annotations in home.js, though it does in app.ts. The only remaining TS error in app.ts is - can't find module 'home' in the import statement. However the Console shows a successful GET of home.js When you say configuration issue, do you mean file structure and relative paths that match? - or something else? app.ts and home.js are in the same directory and have the same import statement for @Component. What am I missing? Commented Sep 2, 2015 at 18:26
  • Here's a clue, but I don't know the answer. In app.ts when the import for Home is from "home", the TS error is can't find home. When import is from "/home", the TS error is - home has no exported member 'Home'. I've tried export class Home { } - it doesn't work. Would something else for the Home class statement work? Commented Sep 2, 2015 at 19:00
  • By configuration I mean system.js. See these plnkrs for example : plnkr1 (using alpha36), plnkr2 (using alpha36 with a little outdated systemjs and traceur). The errors you see now are in your IDE or when compiling the ts files? Commented Sep 2, 2015 at 19:02
  • Eric, I see in plnkr1 that cmpB is defined in app.ts. When I moved the component code in home.js into app.ts, all the TypeScript errors disappeared in my Atom editor (with atom-typescript). I thought import statements would bring the code in. It seems not. Is it true that components for routed partial pages all have to be in app.ts? Though the TS errors are fixed, I still don't have routing working. I have a test a link showing, but I don't have the 'wiring' right, I guess. The Console errors are No provider for Router and componentRef undefined. I'll try again. Thanks for plnkr1. Commented Sep 3, 2015 at 20:24

2 Answers 2

Reset to default
11

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:

Second, your router bootstrap is broken

bootstrap(ResidenceApp, [ routerInjectables ]);

routerInjectables has been replaced with ROUTER_PROVIDERS

bootstrap(ResidenceApp, [ ROUTER_PROVIDERS ]);

Source:

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:

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:

Update2:

Breaking change:

[router-link] -> [routerLink]

Thanks to @Mike Laird's comment.

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

10 Comments

Evan, it took me a while to get back to this, but your comments got routing mostly working for me. Thanks. It routes forward to a new page, but not completely when going back to the home page. The home page URL appears in the browser's command bar, but the home page does not refresh automatically and appear. A click on the refresh button gets the home page to appear. Any thoughts on that? Thank you, very much.
Evan notes above that lots of breaking changes have occurred. Specifically, this Youtube, youtube.com/watch?t=10&v=ZsGRiHSaOxM has old broken syntax. It is well done and clear, but out of date.
When I click the link to a sub-page, I get the Console error - Component "PostApartment4Rent" has no route config. When I click the Back button, I get the Console exception - TypeError: instruction is undefined in [null]
@Mike_Laird I'm glad you were able to make some progress. Would you mind posting an update with the latest version of your code? It's kinda hard to infer the cause after all the changes.
Evan, we filled up this page, so I posted a new problem of not routing back at - stackoverflow.com/questions/33681486/… Thank you, again.
|
0

After doing all the steps and still does not work, just try to set the base URL in the index.html using this:<base href="/"> after the <head> tag`.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.