How to Load multiple angular2 components from different folders in one index.html file?
<p>I have developed few angular 2 components. 
the directory structure for my application is following.
<a href="https://i.stack.imgur.com/YMR6b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YMR6b.png" alt="This is the directory structure of my application"></a></p>

<p>and I am loading each component from index.html as </p>

<pre><code>&lt;script&gt;
  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));
&lt;/script&gt;
</code></pre>

<p>what I have done is , there must be only one index.html and according to the path provided inside <strong>System.config</strong> I will be able to load different components.
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 <strong>main.ts</strong> of each component from that index.html.</p>

<p>Following are my code details.</p>

<ol>
<li>index.html</li>
</ol>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;    
    &lt;title&gt;Angular 2 TypeScript App&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link href="node_modules\bootstrap\dist\css\bootstrap.min.css" rel="stylesheet" /&gt;
    &lt;link href="node_modules\bootstrap\dist\css\style.css" rel="stylesheet" /&gt;
    &lt;!-- 1. Load libraries --&gt;
    &lt;!-- IE required polyfills, in this exact order --&gt;
    &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;  
    &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/angular2/bundles/http.dev.js"&gt;&lt;/script&gt;
    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script&gt;
      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));
    &lt;/script&gt;

  &lt;/head&gt;

  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>2.main.ts</p>

<pre><code>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
]);
</code></pre>

<p>3.app.component.ts</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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: '&lt;h1&gt;{{record.data}}&lt;/h1&gt;',
    directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
})
export class AppComponent {
    public record;    
    constructor(private dataService: DataService) { }
    ngOnInit() {        
        this.dataService.getData()
        .subscribe((customers:any[]) =&gt; {
            this.record = customers;
        });   
  }  
}</code></pre>
</div>
</div>
</p>

<p>4.data.service.ts</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; res.json());
    }
}</code></pre>
</div>
</div>
</p>

<p>I have tried all methods, but my index.html is not redirecting to my main.ts to load my component.</p>