Angular 2：导入路由器包答案

【问题标题】：Angular 2: importing router bundleAngular 2：导入路由器包
【发布时间】：2016-01-21 08:21:27
【问题描述】：

我不知道为什么我不能让路由器作为依赖项导入。在控制台中我收到错误：

system.js:4 GET http://127.0.0.1:8000/angular2/src/platform/dom/dom_adapter.js 404 (Not Found)

看看他们使用几乎相同设置的谷歌示例，所以我不太确定我哪里出错了。如果我注释掉路由器的导入，一切都会按预期工作。

index.html:

<body>
    <main>Loading...</main>

    <script src="lib/traceur-runtime.js"></script>
    <script src="lib/system.js"></script>
    <script src="lib/Reflect.js"></script>

    <script>
        System.config({defaultJSExtensions: true});
    </script>

    <script src="lib/angular2.js"></script>
    <script src="lib/router.js"></script>

    <script>
        System.import('index').catch(console.log.bind(console));
    </script>
</body>

index.js：

import {Component, View, bootstrap} from 'angular2/angular2';
import {routerInjectables} from 'angular2/router';
import {stepOne} from 'step-one/step-one';

@Component({
    selector: 'main'
})

/*@RouteConfig([
    {path: '/', name: 'StepOne', component: stepOne, useAsDefault: true}
])*/

@View({
    template: `
    <h1>INIT</h1>
    <router-outlet></router-outlet>
    `
})

class Main {
    constructor(){}
}

bootstrap(Main, [routerInjectables]);

【问题讨论】：

你在哪里导入 ROUTER_DIRECTIVES ？

标签： javascript angular angular2-routing

【解决方案1】：

您的代码中似乎有很多错误，这里很少...

使用下面给出的更正您的导入，因为 angular2 现在处于测试阶段...

import {bootstrap} from 'angular2/platform/browser';
import {Component, View} from 'angular2/core';

你还没有提供路由指令从这里也导入这个并添加到指令列表中。

import {ROUTER_DIRECTIVES, RouteParams, ROUTER_PROVIDERS} from 'angular2/router';

你可以在 index.ts 中更好地使用它

    @Component({
        selector: 'main',
        template: `
        <h1>INIT</h1>
        <router-outlet></router-outlet>`, 
        directives: [ROUTER_DIRECTIVES],
    })
@RouteConfig([
    {path: '/', component: stepOne, name: 'StepOne', useAsDefault: true}
])

class Main {
    constructor(){}
}

bootstrap(Main, [ROUTER_PROVIDERS]);

你的 index.html 应该是这样的。

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
    System.config({
                defaultJSExtensions: true,
                 map: {
                    rxjs: 'node_modules/rxjs'
                },
                packages: {
                    rxjs: {
                    defaultExtension: 'js'
                }
                }
            });

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

<script>
    System.import('Main');

</script>

【讨论】：

我正在通过 gulp 移动构建文件，但我现在只使用节点模块文件夹...我将引导参数更改为 ROUTER_PROVIDERS，现在一切正常。谢谢！