Question

我正在学习angular2。我想将typescript转换为es5，doc：https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

我运行es5代码，我在控制台中收到以下错误

EXCEPTION：错误：未捕获（承诺）： TypeError：无法读取＆＃39;的属性＆＃39;未定义的平台browser.umd.js：1900

关于我可能做错的任何指示？

打字稿＆＃34; app / app.routes.ts＆＃34;：

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

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

export const appRouterProviders = [
  provideRouter(routes)
];

我用es5＆＃34; app / app.routes.js＆＃34;写道：

(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 = {}));

我发现＆＃34; ng.router.RouteConfig＆＃34;和＆＃34; ng.router.RouterConfig＆＃34;未定义。

打字稿＆＃34; app / app.component.ts＆＃34;：

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';
}

我用es5＆＃34; app / app.component.js＆＃34;写道：

(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 = {}));

打字稿＆＃34; app / main.ts＆＃34;：

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

bootstrap(AppComponent, [
  appRouterProviders
]);

我用es5＆＃34; app / main.js＆＃34;写道：

(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 1

我完成了Angular 2示例，英雄之旅，路由部分，使用ES5。

我将代码上传到github。

我使用的是2.0.0-RC5套装。我无法使用2.0.0-RC4捆绑解决问题！

流动零件代码：

<强> 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 = {}));

Angular2示例，我将typescript转换为es5，得到路由错误，如何？

1 个答案: