如何在一个index.html文件中加载来自不同文件夹的多个angular2组件？

Question

I have developed few angular 2 components. 我开发了几个角度2组件。 the directory structure for my application is following. 我的应用程序的目录结构如下。

and I am loading each component from index.html as 我正在从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 I have done is , there must be only one index.html and according to the path provided inside System.config I will be able to load different components. 我所做的是，必须只有一个index.html，根据System.config中提供的路径，我将能够加载不同的组件。 I am able to load the components if I am placing index.html inside each components folder,but i want to use only one index.html for all components by calling main.ts of each component from that index.html. 如果我将index.html放在每个组件文件夹中，我可以加载组件，但是我想通过从index.html调用每个组件的main.ts来仅对所有组件使用一个index.html。

Following are my code details. 以下是我的代码详细信息。

index.html 的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 this 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 the application --> <body> <my-app>Loading...</my-app> </body> </html>

2.main.ts 2.main.ts

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {AppComponent} from './app.component'

bootstrap(AppComponent, [
    HTTP_PROVIDERS
]);

3.app.component.ts 3.app.component.ts

 import {Component} from 'angular2/core'; import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from 'angular2/common'; import {Http, Response} from 'angular2/http'; import {Observable} from 'rxjs/Rx'; import { DataService } from '../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 4.data.service.ts

 import { Injectable } from 'angular2/core'; import { Http, Response } from '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 all methods, but my index.html is not redirecting to my main.ts to load my component. 我已经尝试了所有方法，但我的index.html没有重定向到我的main.ts来加载我的组件。

Answer 1

You should define each component_* folder into your SystemJS configuration: 您应该将每个component_*文件夹定义到SystemJS配置中：

<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 you will be able to use the component_* (for example component_1 in your imports). 这样您就可以使用component_* （例如，导入中的component_1 ）。

If you want to keep your configuration and be able to use all components, you should move your component_* folders under the app folder... 如果要保留配置并能够使用所有组件，则应将component_*文件夹移动到app文件夹下...

如何在一个index.html文件中加载来自不同文件夹的多个angular2组件？

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-02-08 12:18:21

如何在一个index.html文件中加载来自不同文件夹的多个angular2组件？

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-02-08 12:18:21

解决方案1
3 已采纳 2016-02-08 12:18:21