Bhushan Gadekar February 2016

How to Load multiple angular2 components from diffrent folders in one index.html file?

I have developed few angular 2 components. the directory structure for my application is following. This is the directory structure of my application

and I am loading each component from index.html as

<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. 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.

Following are my code details.

  1. 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>
    <        

Answers


Thierry Templier February 2016

You should define each component_* folder into your 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 you will be able to use the component_* (for example component_1 in your imports).

If you want to keep your configuration and be able to use all components, you should move your component_* folders under the app folder...

Post Status

Asked in February 2016
Viewed 1,081 times
Voted 8
Answered 1 times

Search




Leave an answer