Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I have existing website, which is build with angular1+requirejs and php. I would like to add angular2 (which I have already added, using angular2-cli).

I don't need angular1 to communicate with angular2, so we don't have to do ng-upgrade

I want to bootstrap angular2 components outside app component typescript file.

I'm bit confused on how to do this, because everything is in typescript and after compiled, they are completely different.

I'm trying to load different component per page, sometime one and sometime more then one.

share|improve this question

Actually, first to all you need to provide more information. But, on the big picture, you have create a root module and declare component that belong to it, the same for directives and so on. Ex.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import
       { AppComponent }  from './app.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

bootstraping the module:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule); 

anyway, you can check this to get some idea ngModule

This is how to boostrap with javascript. Creating module:

(function(app) {
  app.AppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule ],
      declarations: [ app.AppComponent ],
      bootstrap: [ app.AppComponent ]
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

bootstraping:

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.AppModule);
  });
})(window.app || (window.app = {}));
share|improve this answer
    
I'm trying to bootstrap outside typescript. Is there any possibility with that? – Basit 4 hours ago
    
You need to use typescript to declare the directives you're using. You only need to bootstrap once, and your bootstrap code can be super general - each of your pages can still live in their own component w/o any bootstrap code needed per page. – Jamie 2 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.