HTML 페이지에서 직접 외부에서 typescript 파일의 Angular2 부트 스트랩

Question

angular1+requirejs 및 php으로 빌드 된 기존 웹 사이트가 있습니다. angular2 (이미 추가 한 것은 angular2-cli을 사용)을 추가하고 싶습니다.

내가 angular2와 통신 할 수 angular1 필요하지 않습니다, 그래서 우리는 내가 app componenttypescript 파일 외부 angular2 구성 요소를 부트 스트랩 할 ng-upgrade

할 필요가 없습니다.

나는 모든 것을 타이프 스크립트로 처리하고 컴파일 한 후에 완전히 혼란 스럽기 때문에 약간 혼란 스럽다.

페이지마다 다른 구성 요소를로드하려고합니다. 언젠가는 언젠가 언젠가는 언젠가 언젠가는 더 많이로드하려고합니다.

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

모듈 bootstraping : 어쨌든

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

을, 당신은 몇 가지 아이디어 ngModule

이 자바 스크립트로 부트 스트랩하는 방법이다를 얻을이를 확인할 수 있습니다. 만들기 모듈 :

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