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 /溶液

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应用程序......