Angular 2:导入路由包
Angular 2: importing router bundle
我很困惑为什么我不能让路由器作为依赖项导入。在控制台中我得到错误:
system.js:4 GET http://127.0.0.1:8000/angular2/src/platform/dom/dom_adapter.js 404 (Not Found)
查看 google 示例,它们实际上使用了相同的设置,所以我不太确定哪里出错了。如果我注释掉路由器的导入,它就会按预期工作。
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]);
看来您的代码中有很多错误,这里很少...
由于 angular2 现在处于测试阶段,请使用以下给定的内容更正您的导入...
import {bootstrap} from 'angular2/platform/browser';
import {Component, View} from 'angular2/core';
你还没有提供 router-directives 从这里也导入这个并添加到指令列表中。
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>
我很困惑为什么我不能让路由器作为依赖项导入。在控制台中我得到错误:
system.js:4 GET http://127.0.0.1:8000/angular2/src/platform/dom/dom_adapter.js 404 (Not Found)
查看 google 示例,它们实际上使用了相同的设置,所以我不太确定哪里出错了。如果我注释掉路由器的导入,它就会按预期工作。
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]);
看来您的代码中有很多错误,这里很少...
由于 angular2 现在处于测试阶段,请使用以下给定的内容更正您的导入...
import {bootstrap} from 'angular2/platform/browser';
import {Component, View} from 'angular2/core';
你还没有提供 router-directives 从这里也导入这个并添加到指令列表中。
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>