Creating Separate Components Angular 2

Question

I'm trying to create two separate components in Angular 2, they have no relation between each other so they are not nested. One Component is Users and the other is Clients.

What I do is this to call them separately is, use main.ts as a main entry point, bootstrap both components there, and then call them in index.html.

My questions are:

1- Can I not depend on a main entry point and call them directly from the index.html like a directive in angular 1, or angular 2 you have to depend on a main entry component?

2- There a better way to bootstrap several controllers?

Here is the plunkr: http://plnkr.co/edit/fm70cmcWOSFrEKyRx4GF

My config.js

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

My clients.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
  directives: []
})
export class Clients {
  constructor() {
    this.name = 'Angular2'
  }
}

My users.ts

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector: 'users',
  providers: [],
  template: `
    <div>
      <h2>Hello second component</h2>

    </div>
  `,
  directives: []
})
export class Users {
  constructor() {
    this.name = 'Angular2'
  }
}

My main.ts

//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {Clients} from './clients';
import {Users} from './users';


bootstrap(Clients, [])
  .catch(err => console.error(err));

bootstrap(Users, [])
  .catch(err => console.error(err));

My index.html

<!DOCTYPE html>
<html>

<head>
  <title>angular2 playground</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="config.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
  <users></users>
</body>

</html>

Take a look on this post: http://stackoverflow.com/questions/34818238/instance-angular-2-component-two-times/34818494#34818494 — Shaohao, Mar 14 '16 at 15:38

Thierry Templier · Accepted Answer · 2016-03-14T16:54:01.790

In fact you can bootstrap several components into your HTML entry file but they will correspond to two different applications with separate injectors i.e. you can't use elements of the other application from dependency injection.

You can notice that there is a workaround based a provider using useValue and create explicitly its instance outside the two applications.

You need to have a main component per application. This component will be used to bootstrap this application. The selector of this component will be used to attach the application in the HTML entry file.

Note that you can bootstrap several components but not the same component twice.

So the best approuch is to use a main file where I bootstrap my base component (container of the other components). — Diego Unanue, Mar 14 '16 at 17:26

Creating Separate Components Angular 2

1 Answers1