Angular2從外部打字稿文件引導，直接從html頁面

Question

我有現有的網站，它與angular1+requirejs和php構建。我想補充angular2（我已經添加了，使用angular2-cli）。

我不需要angular1與angular2溝通，所以我們沒有做ng-upgrade

我想引導外app componenttypescript文件angular2組件。

我有點困惑於如何做到這一點，因爲一切都在打字稿和編譯後，他們是完全不同的。

我想加載每頁不同的組件，有時一個，有時多一個。

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

的Bootstrap模塊：

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 = {})); 

的Bootstrap：

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