2017-11-06 1 views
1

모듈 및/또는 구성 요소를 AOT로 컴파일 된 Angular 4 응용 프로그램에로드하는 방법을 개발하기 위해 노력해 왔지만 절대로 볼 수없는 다양한 솔루션으로 인해 어려움을 겪었습니다 나를 원하는 곳으로 데려가려고.런타임에 모듈 4 및 모듈을 모듈로 동적으로로드

  • 내 주요 응용 프로그램이 AOT가 컴파일하고, 런타임 때까지로드 무엇에 대한 지식이없는, 그래서 내가 특별히 컴파일시 항목의 구성 요소로 내 동적 모듈을 식별 할 수 없습니다 :

    내 요구 사항은 다음과 같은 수 있습니다 (Angular.io에 제공된 '동적'구성 요소로드 예제에 명시 적으로 필요함)

  • GET 요청을 통해 백엔드 데이터베이스에서 코드를 가져올 수 있으면 좋겠지 만 간단히 살아남을 수 있습니다. 컴파일 된 사이트와 함께 폴더에 살고있다.
  • Webpack을 사용하여 주요 응용 프로그램을 컴파일하고이를 덩어리로 만들었습니다. 그래서 많은 SystemJS 기반 솔루션이 막 다른 골목처럼 보입니다. 현재 연구를 기반으로하면이 문제가 잘못 될 수 있습니다.
  • 필자는 주요 응용 프로그램의 구성 요소에 직접적으로 액세스하거나 액세스 할 필요가 없습니다. 즉, 본질적으로 하나의 각도 응용 프로그램을 다른 응용 프로그램으로로드하고, 동적으로로드 된 모듈은 단단히 통제 된 명시 적 인터페이스 만 가질 것입니다 부모 응용 프로그램과 포인트.

내가 SystemJsNgModuleLoader 같은 도구를 사용하여 탐색 한 - 내가 AOT 어떻게 든 허용하면 할 행복 해요 각 컴파일러 선물을 가지고해야 할 것 같습니다 제가 그것을 사용하지 않는 경우에도이를 포함 다른 곳에서. 또한 ngc를 사용하여 동적 모듈을 직접 컴파일하고 결과로 나타나는 컴파일 및 컴파일 된 구성 요소/모듈을로드하는 방법을 살펴 보았습니다.하지만 이것이 가능한지, 아니면 그렇다면 Angular가 제공하는 도구가 무엇인지 명확하지 않습니다. 또한 ANALYZE_FOR_ENTRY_COMPONENTS에 대한 참조를 보았습니다. 그러나이 분석의 한계가 무엇인지 명확하게 파악하지 못했습니다.

나는 공용 인터페이스를 정의한 다음 내 동적 구성 요소를 내 응용 프로그램에 가져 오기만하는 요청을 내릴 수 있다고 가정했으나 Angular는 외부에서 스테핑을하지 않으려 고 노력하는 모든 것에 알레르기가있는 것처럼 보입니다. 각도가 아닌 코드를 DOM에 직접 첨부하려고합니다.

내가 할 수있는 일이 가능한 것일까 요? Angular 2+는 이러한 종류의 내부 애플리케이션 아키텍처를 즉시 수정하는 것을 무시합니까?

답변

1

정확히 어떤 일을하는지 설명하는 기사를 찾았습니다. 요컨대 부트 스트랩 수명주기를 인수해야합니다.

마법은 여기에 있습니다. import {AComponentNgFactory, BComponentNgFactory} from './components.ngfactory.ts'; @NgModule({ imports: [BrowserModule], declarations: [AComponent, BComponent] }) export class AppModule { ngDoBootstrap(app) { fetch('url/to/fetch/component/name') .then((name)=>{ this.bootstrapRootComponent(app, name)}); } bootstrapRootComponent(app, name) { const options = { 'a-comp': AComponentNgFactory, 'b-comp': BComponentNgFactory };

https://blog.angularindepth.com/how-to-manually-bootstrap-an-angular-application-9a36ccf86429

관련 문제