从外部typescript文件直接从Angular2页面引导

Question

我有现有的网站，这是与angular1+requirejs和php建设。我想添加angular2 (我已经使用angular2-cli添加了它)。

我不需要angular1来与angular2通信，所以我们不需要使用ng-upgrade

我想在app component typescript文件之外引导angular2组件。

我对如何做到这一点有点困惑，因为一切都是用typescript编写的，编译后，它们是完全不同的。

我试图在每个页面加载不同的组件，有时一个，有时多个。

Answer 1

实际上，首先你需要提供更多的信息。但是，从总体上看，您已经创建了一个根模块，并声明了属于它的组件，指令等也是如此。例如。

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 {}

引导模块：

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

无论如何，你可以查看这个来获得一些想法ngModule

这是如何使用javascript进行引导。创建模块：

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

引导：

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.AppModule);
  });
})(window.app || (window.app = {}));