Fan TianYi Fan TianYi - 3 months ago 16
AngularJS Question

Angular2 example, I convert typescript to es5, get route error, how?

I'm learning angular2. I want to convert typescript to es5, doc: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

I run es5 code, I get the following error in my console


EXCEPTION: Error: Uncaught (in promise):
TypeError: Cannot read property 'of' of undefined

platform-browser.umd.js:1900


Any pointers as to what I may be doing wrong?

typescript "app/app.routes.ts":

import { provideRouter, RouterConfig } from '@angular/router';
import { HeroesComponent } from './heroes.component';

const routes: RouterConfig = [
{
path: 'heroes',
component: HeroesComponent
}
];

export const appRouterProviders = [
provideRouter(routes)
];


I write with es5 "app/app.routes.js":

(function(app) {
console.log(ng.router.RouterConfig);
console.log(ng.router.RouteConfig);
const routes = [
{path: '', redirectTo: '/', pathMatch: 'full'},
{path: 'heroes', component: app.HeroesComponent}
];

app.appRouterProviders = ng.router.provideRouter(routes);
console.log(app.appRouterProviders);
})(window.app || (window.app = {}));


I find "ng.router.RouteConfig" and "ng.router.RouterConfig" are undefined.

typescript "app/app.component.ts":

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { HeroService } from './hero.service';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<a [routerLink]="['/heroes']">Heroes</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [
HeroService
]
})
export class AppComponent {
title = 'Tour of Heroes';
}


I write with es5 "app/app.component.js":

(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<a [routerLink]="['/heroes']">Heroes</a>
<router-outlet></router-outlet>
`
directives: [ng.router.ROUTER_DIRECTIVES],
providers: [app.HeroService]
})
.Class({
constructor: [app.HeroService, function(heroService) {
this.heroService = heroService;
this.title = 'Tour of Heroes';
}]
});
})(window.app || (window.app = {}));


typescript "app/main.ts":

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { appRouterProviders } from './app.routes';

bootstrap(AppComponent, [
appRouterProviders
]);


I write with es5 "app/main.js":

(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(app.AppComponent, [app.appRouterProviders]);
});
})(window.app || (window.app = {}));


index.html:

<!-- 1. Load libraries -->
<!-- IE required polyfill -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<script src="node_modules/@angular/router/bundles/router.umd.js"></script>
<script src="node_modules/@angular/router-deprecated/bundles/router-deprecated.umd.js"></script>

<!-- 2. Load our 'modules' -->
<script src='app/hero.js'></script>
<script src='app/hero.service.js'></script>
<script src='app/mock-heroes.js'></script>
<script src='app/hero-detail.component.js'></script>
<script src='app/heroes.component.js'></script>
<script src='app/app.component.js'></script>
<script src='app/app.routes.js'></script>
<script src='app/main.js'></script>

Answer

I completing the Angular 2 Example, Tour Of Heroes, the Routing section, use ES5.

I upload code to github.

I am using the 2.0.0-RC5 bundle. I can not solve the proble using the 2.0.0-RC4 bundle!

flowing the part code:

app.routes.js

(function(app) {
  app.routing = ng.router.RouterModule.forRoot([
    {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
    {path: 'dashboard', component: app.DashboardComponent},
    {path: 'heroes', component: app.HeroesComponent},
    {path: 'detail/:id', component: app.HeroDetailComponent}
  ]);
})(window.app || (window.app = {}));
Comments