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: stackoverflow.com/questions/34818238/… — Shaohao
– Shaohao, Commented Mar 14, 2016 at 15:38

Thierry Templier · Accepted Answer · 2016-03-14 16:54:01Z

3

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.

edited Mar 14, 2016 at 16:54

answered Mar 14, 2016 at 16:48

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diego Unanue Over a year ago

So the best approuch is to use a main file where I bootstrap my base component (container of the other components).

Collectives™ on Stack Overflow

Creating Separate Components Angular 2

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related