angular - AngularJS 2 - Can't load component -
i'm trying import component inside 'app.component.ts' main component run on application start.
here simplified piece of code of app.component.ts.
import {component} 'angular2/core'; import {contactlistcomponent} './contacts/contact-list.component'; @component({ selector: 'my-app', template: `hello`, directives: [contactlistcomponent], }) export class appcomponent {} i error on second import, when go browser console see error:
my index.html looks this:
<html> <head> <title>angular 2 application</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 1. load libraries --> <!-- ie required polyfills, in exact order --> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="node_modules/angular2/bundles/http.js"></script> <!-- 2. configure systemjs --> <script> system.config({ packages: { app: { format: 'register', defaultextension: 'js' } } }); system.import('app/boot') .then(null, console.error.bind(console)); </script> <link rel="stylesheet" href="src/css/app.css"> </head> <!-- 3. display application --> <body> <my-app>loading...</my-app> </body> </html>
you need have contactlistcomponent in file under app/contacts folder according systemjs configuration have:
app/ - boot.ts - app.component.ts - contacts/ - contact-list.component.ts it seems contact-list.component.ts isn't located here or there problem when transpiled contact-list.component.js file.
Comments
Post a Comment