角度 2 路由器系统在 ES5 中未定义

Question

我正在尝试用ES5学习Angular 2。但我被困在路由上。我按照 angular.io 年的教程进行操作，并在index.html中添加了以下脚本 -

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>

一切正常，直到我尝试添加

<script src="node_modules/angular2/bundles/router.dev.js"></script>

添加此内容后，我收到以下错误

System is undefined 

我可以看到router.dev.js使用System未定义的变量。我该如何解决这个问题？

添加后

<script src="node_modules/systemjs/dist/system.src.js"></script>

我收到以下错误 -

EXCEPTION: No provider for Route! (class3 -> Route)

主.js

(function (app) {
    document.addEventListener('DOMContentLoaded', function () {
        ng.platform.browser.bootstrap(app.AppComponent, [ng.router.ROUTER_PROVIDERS]);
    });
})(window.app || (window.app = {}));

app.component.js

(function (app) {
    //Heroes Detail Component
    app.HeroDetailComponent = ng.core.Component({
        selector: 'my-hero-detail',
        templateUrl: 'hero-detail.html',
        inputs: ['hero']
    }).Class({
        constructor: function () {
        }
    });
    //Heroes Component
    app.HeroesComponent = ng.core.Component({
        selector: "my-heroes",
        templateUrl: 'heroes.html',
        styleUrls: ['style.css'],
        directives: [app.HeroDetailComponent]
    }).Class({
        constructor: [app.HeroService, function (_heroService) {
            this.title = 'Tour of Heroes';
            this._heroService = _heroService;
        }],
        ngOnInit: function () {
            this.getHeroes();
        },
        onSelect: function (hero) {
            this.selectedHero = hero;
        },
        getHeroes: function () {
            this._heroService.getHeroes().then(heroes => this.heroes = heroes);
        }
    });
    //App Component
    app.AppComponent = ng.core.Component({
        selector: 'my-app',
        templateUrl: 'app.html',
        directives: [app.HeroesComponent, ng.router.ROUTER_DIRECTIVES],
        providers: [app.HeroService]
    }).Class({
        constructor: [ng.router.Route, function (_router) {
            this.title = 'Tour of Heroes';
            this._router = _router;
        }]
    });
    //Route config
    app.AppComponent = ng.router.RouteConfig([
        {
            path: '/heroes',
            name: 'Heroes',
            component: app.HeroesComponent
        }
    ])(app.AppComponent);
})(window.app || (window.app = {}));

应用服务.js

(function (app) {
    app.HeroService = ng.core.Class({
        constructor: function () {
            this.HEROES = [
                { "id": 11, "name": "Mr. Nice" },
                { "id": 12, "name": "Narco" },
                { "id": 13, "name": "Bombasto" },
                { "id": 14, "name": "Celeritas" },
                { "id": 15, "name": "Magneta" },
                { "id": 16, "name": "RubberMan" },
                { "id": 17, "name": "Dynama" },
                { "id": 18, "name": "Dr IQ" },
                { "id": 19, "name": "Magma" },
                { "id": 20, "name": "Tornado" }
            ];
        },
        getHeroes: function () {
            return Promise.resolve(this.HEROES);
        },
        getHeroesSlowly: function () {
            return new Promise(resolve =>
                setTimeout(() => resolve(this.HEROES), 2000) // 2 seconds
                );
        }
    });
})(window.app || (window.app = {}));

我正在尝试从 angular.io 转换 ES5 中的英雄教程。

DR

;DR/解决方案

1. ES5 或 angular2-all.umd.js 不需要router.dev.js
错误
2. 是由拼写错误引起的。 ng.router.Route应该ng.router.Router

Answer 1

您应该尝试在HTML条目文件中包含SystemJS：

<script src="node_modules/systemjs/dist/system.src.js"></script>

也就是说，我在 ES5 中使用了路由（请参阅此 plunkr：https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=info），但我不需要包含router.dev.js。后者适用于编写的 TypeScript 或 ES6 应用程序的 Angular2 应用程序......