Skip to main content

Angular 2: Multiple instances in the same Application

Von

Requirement: 

  • Use multiple Root-Components in the same Application 
  • This Root-Components use the same Implementations and Services
  • Display the Root-Components on the same Single-Page

Solution:

App-Module preparation:
 import { BrowserModule, DOCUMENT } from '@angular/platform-browser';  
 import { NgModule, Inject, Component } from '@angular/core';  

 export class AppModule {  
 private browser_document;  
  ngDoBootstrap(appRef){  
   if(this.browser_document.getElementsByTagName('app-root1').length > 0){appRef.bootstrap(AppComponent1);}  
   if(this.browser_document.getElementsByTagName('app-root2').length > 0){appRef.bootstrap(AppComponent2);}  
  }  
  constructor(@Inject(DOCUMENT) private document: any){  
   this.browser_document = document;  
  }  
 }
Service preparation:
Angular 2 has two options to provide a service.
1. Single instance
For a multiple implementation of more Root-Components we need the second option.
2. Multiple instance
Bootstrap: 
Replace the bootstrap declaration with:
 entryComponents: [  
   AppComponent1,   
   AppComponent2
 ]
Index.html:
 <html>  
 <head>  
  <title>TestApplication</title>  
  <base href="/">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="icon" type="image/x-icon" href="favicon.ico">  
 </head>  
 <body>  
       <app-root1>Loading...</app-root1>  
       <app-root2> Loading...</app-root2>  
 </body>  
 </html>

In cooperation with Ludwig Fischer

Labels:

Comments

Post a Comment

Popular posts from this blog

Create a simple Messageboard with Firebase and Angular4

Von
You want that your users can leave messages in your Angular Application. In this Article I explain how you can implement this with Angular 4 and Firebase. First we have to import the Moduls for Firebase in our app.module.ts and our component. app.module.ts import  {  AngularFireModule  }  from   'angularfire2' ; import  {  AngularFireDatabaseModule ,  AngularFireDatabase ,  FirebaseListObservable  }  from   'angularfire2/database' ; @ NgModule ({    declarations:  [      AppComponent   ],    imports:  [      BrowserModule ,      FormsModule ,      HttpModule ,      AngularFireModule . initializeApp ( firebaseConfig ),      AngularFireDatabaseModule , We also have to configure the AngularFireModule. export   const   fireba...
Post a Comment
Read more

Generate documentation for Angular projects with Compodoc

Von
Sometimes the structure of Angular projects can become confusing. After adding tons of components and modules it might be difficult to keep track of what is what. Compodoc can help you out by generating a much better to read documentation for your project. It can give you a visual and easy to browse overview of all the code in your application and lots of useful features. How to install: Compodoc is available by npm. First install it globally: npm install -g @compodoc/compodoc Then install it in your project: npm install --save-dev @compodoc/compodoc In a next step you have to add a command to your package.json. In the 'scripts' area add the following line: "compodoc" :  "./node_modules/.bin/compodoc -p src/tsconfig.app.json" Hint: in the original documentation at the moment it refers to tsconfig.json which is wrong and would give you an error message. Finally generate the documentation and open it in the browser: npm run compodoc co...
Post a Comment
Read more