Angular 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)

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

app.service.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。

TL;DR/Solution

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

Answer 1

您应该尝试将 SystemJS 包含在您的 HTML 入口文件中：

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

就是说，我使用了 ES5 的路由（参见这个 plunkr：https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=info），但我不需要包含 router.dev.js。后者是针对 Angular2 应用编写的 TypeScript 或 ES6 应用...

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

Angular 2 router System is undefined in ES5

angularjs

angular2-routing

angular

main.js

app.component.js

app.service.js

TL;DR/Solution