javascript - Angular 2: importing router bundle -
i'm stuck why can't router import dependency. in console error:
system.js:4 http://127.0.0.1:8000/angular2/src/platform/dom/dom_adapter.js 404 (not found)
looking @ google examples they're using practically same setup i'm not sure i've gone wrong. if comment out import router works expected.
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} 'angular2/angular2'; import {routerinjectables} 'angular2/router'; import {stepone} '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]);
seeems there many errors in code few here...
correct imports given below of angular2 in beta now...
import {bootstrap} 'angular2/platform/browser'; import {component, view} 'angular2/core';
you have not provide router-directives import 1 here , add directive list.
import {router_directives, routeparams, router_providers} 'angular2/router';
better way can use in 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]);
and index.html should this.
<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>
Comments
Post a Comment