javascript - How to Load multiple angular2 components from different folders in one index.html file? -
i have developed few angular 2 components. directory structure application following. 
and loading each component index.html
<script> system.config({ map: { 'rxjs': 'node_modules/rxjs' }, packages: { app: { format: 'register', defaultextension: 'js' }, 'rxjs': {defaultextension: 'js'} } }); system.import('component_1/app/main') .then(null, console.error.bind(console)); </script> what have done , there must 1 index.html , according path provided inside system.config able load different components. able load components if placing index.html inside each components folder,but want use 1 index.html components calling main.ts of each component index.html.
following code details.
- index.html
<html> <head> <title>angular 2 typescript app</title> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="node_modules\bootstrap\dist\css\bootstrap.min.css" rel="stylesheet" /> <link href="node_modules\bootstrap\dist\css\style.css" rel="stylesheet" /> <!-- 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/http.dev.js"></script> <!-- 2. configure systemjs --> <script> system.config({ map: { 'rxjs': 'node_modules/rxjs' }, packages: { app: { format: 'register', defaultextension: 'js' }, 'rxjs': {defaultextension: 'js'} } }); system.import('component_1/app/main') .then(null, console.error.bind(console)); </script> </head> <!-- 3. display application --> <body> <my-app>loading...</my-app> </body> </html>2.main.ts
import {bootstrap} 'angular2/platform/browser' import {http_providers} 'angular2/http'; import 'rxjs/add/operator/map'; import {appcomponent} './app.component' bootstrap(appcomponent, [ http_providers ]); 3.app.component.ts
import {component} 'angular2/core'; import {ngswitch, ngswitchwhen, ngswitchdefault,ngfor} 'angular2/common'; import {http, response} 'angular2/http'; import {observable} 'rxjs/rx'; import { dataservice } '../app/services/data.service'; @component({ selector: 'my-app', providers: [dataservice], template: '<h1>{{record.data}}</h1>', directives: [ngswitch, ngswitchwhen, ngswitchdefault] }) export class appcomponent { public record; constructor(private dataservice: dataservice) { } ngoninit() { this.dataservice.getdata() .subscribe((customers:any[]) => { this.record = customers; }); } }4.data.service.ts
import { injectable } 'angular2/core'; import { http, response } 'angular2/http'; import 'rxjs/add/operator/map'; @injectable() export class dataservice { constructor(private http: http) { } getdata() { return this.http.get('../../uicomponent.json') .map((res: response) => res.json()); } }i have tried methods, index.html not redirecting main.ts load component.
you should define each component_* folder systemjs configuration:
<script> system.config({ map: { 'rxjs': 'node_modules/rxjs' }, packages: { 'component_1': { format: 'register', defaultextension: 'js' }, 'component_2': { format: 'register', defaultextension: 'js' }, (...) 'rxjs': {defaultextension: 'js'} } }); system.import('component_1/app/main') .then(null, console.error.bind(console)); this way able use component_* (for example component_1 in imports).
if want keep configuration , able use components, should move component_* folders under app folder...
Comments
Post a Comment