하이브리드 응용 프로그램에서 모듈을 각도 2 RC5 NgModule로 어떻게 업그레이드합니까?

Question

기존 hybrid Angular 1+2 application이 있는데 Angular 2 RC5 guidance in relation to the new NgModules을 따르는 데 문제가 있습니다. 이것은 앵귤러 2 RC4 어플리케이션과 함께 사용되는 것처럼 보입니다 - 하이브리드 어플리케이션이 아닌 것처럼 보입니다.

순수한 RC4 시나리오와 달리 - RC5에서만 소개 된 모듈이 없습니다. 기존의 Angular 1.5 모듈을 사용해야합니다. 나는 다음과 같은 옵션을 가지고 있다고 생각합니다 - 다른 것들은 있습니까?

1. Upgrade Adapter을 사용하여 기존 모듈을 업그레이드하십시오. 거기에 모듈을 업그레이드하는 것에 대한 언급은 없지만 늦게 추가되었으므로 문서가 여전히 업데이트 될 수 있습니까? 아니면 곧 추가 될 수 있습니다.
2. 기존 모듈을 RC5 NgModule로 다시 작성하십시오. 이 작업을 수행하는 방법에 대한 지침이 있습니까?

그러면 부트 스트랩 문제가 있습니다. 하이브리드 응용 프로그램을 upgrade_adapter로 부트 스트랩해야한다고 가정합니다. platformBrowserDynamic(). bootstrapModule() 함수를 사용해야한다고 말하는 Update your bootstrap 지침과 어떻게 일치합니까?

업데이트 : lekev87는 RC5에서 NgModule의 도입을 위해 (적어도 부분적으로) 계정에 업데이트 된 것으로 표시되는 각도 문서의 예에 대한 링크를 제공했다.

UpgradeAdapter 인스턴스가 만들어지면 NgModule에 대한 참조가 전달됩니다. 그러나 이것이 무엇을 할 지에 대한 설명은 없습니다.

var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module)); 

내 생각에 전달되는 NgModule 대신 implicitly created one 이용 될 것입니다. 등 모든 구성 요소

여기 궤도에 나는 건가요 선언 -

- We create an implicit NgModule for you as part of the bootstrap() 
- command We automatically hoist your components, pipes, and directives 

그리고 위의 목록에서 두 번째 점 돌보고 나를 책임을 만들 것이라고

?

내 응용 프로그램이 하이브리드 일 때 앵귤러 1과 앵귤러 2 모듈에서 모두 선언해야한다는 의미입니까?

암시 적으로 만들어진 모듈에 대한 액세스 권한을 얻을 수있는 방법이 있습니까? 나는 이것이 내가 필요한 것의 대부분을 가지고있는 기지에서 시작할 수 있다고 생각하고 있으며 나는 그것을 어떻게 든 확장 할 수 있을까?

Answer 1

안녕하세요 여기 당신은이 예제를 가지고 UpgradeAdapter class 설명서를 확인할 수는 :

var adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module)); 
var module = angular.module('myExample', []); 
module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2)); 
module.directive('ng1Hello', function() { 
    return { 
    scope: { title: '=' }, 
    template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)' 
    }; 
}); 
@Component({ 
    selector: 'ng2-comp', 
    inputs: ['name'], 
    template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)', 
    directives: 
}) 
class Ng2Component { 
} 
@NgModule({ 
    declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')], 
    imports: [BrowserModule] 
}) 
class MyNg2Module {} 
document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>'; 
adapter.bootstrap(document.body, ['myExample']).ready(function() { 
    expect(document.body.textContent).toEqual(
     "ng2[ng1[Hello World!](transclude)](project)"); 
}); 

Answer 2

나는 업데이트 docs를 사용하여 NgModule을 소개 할 수 있었다. 새 NgModule에 대해 다음 템플릿을 사용했습니다.

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

@NgModule({ 
    imports: [ BrowserModule ] 
}) 
export class AppModule {} 

UpgradeAdapter의 생성자에 대한 매개 변수로이 참조를 전달했습니다.

import { UpgradeAdapter } from '@angular/upgrade'; 

/* . . . */ 

const upgradeAdapter = new UpgradeAdapter(AppModule); 

upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});