Angular 프로그램을 수동으로 시작하는 방법

텍스트 링크:
How to manually bootstrap an Angular application
Angular 공식 문서에 따르면 Angular 프로그램을 시작하려면 main.ts 파일에 다음 코드를 써야 합니다.

platformBrowserDynamic().bootstrapModule(AppModule);

이 줄 코드platformBrowserDynamic()는 하나의 platform를 구성하기 위한 것이다. Angular 공식 문서의 platform에 대한 정의는 (역자 주: 명확한 이해를 위해 platform의 정의는 번역되지 않는다).
the entry point for Angular on a web page. Each page has exactly one platform, and services (such as reflection) which are common to every Angular application running on the page are bound in its scope.
또한 Angular에는 실행 중인 프로그램 인스턴스(running application instance)의 개념이 있으며, 매개변수로 주입된 태그(token)를 사용하여 인스턴스를 가져올 수 있습니다.상기의 ApplicationRef 정의도 하나platform가 여러 개platform의 대상을 가질 수 있다는 것을 포함하고 각application의 대상은 application를 통해 구성된 것으로 구조 방법은 상문bootstrapModule 파일에서 사용한 것과 같다.따라서 상기의 main.ts 파일에서 코드는 먼저 main.ts 대상과 platform 대상을 구성했다.application 대상이 구성 중일 때 Angular는 모듈application의 AppModule 속성을 검사합니다. 이 모듈은 프로그램을 시작하는 데 사용됩니다.

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

bootstrap 속성은 보통 프로그램을 시작하는 데 사용되는 구성 요소를 포함하고 Angular는 DOM에서 이 시작 구성 요소에 일치하는 선택기를 조회하고 실례화합니다.
Angular 시작 과정은 프로그램을 시작하기 위해 어떤 구성 요소를 원하는지 보여 줍니다. 그러나 프로그램의 구성 요소가 실행될 때 정의되면 어떻게 해야 합니까?이 구성 요소를 얻었을 때, 프로그램을 어떻게 시작해야 합니까?사실 이것은 매우 간단한 과정이다.
NgDoBootstrap
만약 우리가 bootstrap와 A 두 개의 구성 요소를 가지고 있다면, 인코딩은 실행할 때 어떤 구성 요소를 사용해서 프로그램을 시작할지 결정한다. 우선 이 두 구성 요소를 정의합시다.

import { Component } from '@angular/core';

@Component({
  selector: 'a-comp',
  template: `I am A component`
})
export class AComponent {}

@Component({
  selector: 'b-comp',
  template: `I am B component`
})
export class BComponent {}

그런 다음 B에 두 구성 요소를 등록합니다.

@NgModule({
  imports: [BrowserModule],
  declarations: [AComponent, BComponent],
  entryComponents: [AComponent, BComponent]
})
export class AppModule {}

이 두 구성 요소를 사용자 정의 시작 프로그램에 등록해야 하기 때문에 AppModule 속성이 아닌 bootstrap 속성에 등록하고 entryComponents 구성 요소를 등록하면 Angular 컴파일러 (번역자 주: Angular 제공 entryComponents 는 우리가 쓴 Angular 코드를 컴파일합니다.또한 @angular/compiler CLI 도구를 제공하여 이 두 구성 요소에 공장 클래스를 만들 수 있습니다. (번역자 주석: Angular Compiler는 모든 구성 요소를 컴파일할 때 먼저 이 구성 요소 클래스를 대응하는 구성 요소 공장 클래스로 변환합니다. 즉, a.component.ts는 a.component.ngfactory.ts로 컴파일됩니다.)Angular는 @angular/compiler-cli 속성에 등록된 구성 요소를 자동으로 입구 구성 요소 목록에 추가하기 때문에 루트 구성 요소를 bootstrap 속성에 등록할 필요가 없습니다.(역자주: 즉 entryComponents 속성에 등록된 구성 요소는 bootstrap에 중복 등록할 필요가 없습니다.
우리는 entryComponents나 A 구성 요소가 사용될지 모르기 때문에 B에서 선택기를 지정할 수 없기 때문에 index.html 이렇게 밖에 쓸 수 없을 것 같다.

  

     Loading AppComponent content here ...
  

이 때 프로그램을 실행하면 다음과 같은 오류가 발생합니다.
The module AppModule was bootstrapped, but it does not declare “@NgModule.bootstrap” components nor a “ngDoBootstrap” method. Please define one of these
오류 메시지는 Angular가 프로그램을 시작하기 위해 특정한 구성 요소를 사용하지 않았다고 불평하고 있지만, 우리는 확실히 미리 알 수 없다. (번역자 주: 우리는 서버가 언제 무엇을 돌아올지 모른다.)이따가 우리는 수동으로 index.html 클래스에 A 방법을 추가해서 프로그램을 시작해야 한다.

export class AppModule {
  ngDoBootstrap(app) {  }
}

Angular는 B 를 매개 변수로 AppModule (번역자 주: Angular 원본의 이 줄 참조) 주고, 프로그램을 시작할 때 ngDoBootstrap 의 ApplicationRef 방법으로 루트 구성 요소를 초기화합니다.
루트 구성 요소를 시작하는 사용자 정의 방법ngDoBootstrap을 작성합니다.

// app - reference to the running application (ApplicationRef)
// name - name (selector) of the component to bootstrap
function bootstrapRootComponent(app, name) {
  // define the possible bootstrap components 
  // with their selectors (html host elements)
  // （   ：                 ）
  const options = {
    'a-comp': AComponent,
    'b-comp': BComponent
  };
  // obtain reference to the DOM element that shows status
  // and change the status to `Loaded` 
  //（   ：   id   #status    ）
  const statusElement = document.querySelector('#status');
  statusElement.textContent = 'Loaded';
  // create DOM element for the component being bootstrapped
  // and add it to the DOM
  // （   ：     DOM   ）
  const componentElement = document.createElement(name);
  document.body.appendChild(componentElement);
  // bootstrap the application with the selected component
  const component = options[name];
  app.bootstrap(component); // （   ：   bootstrap()       ）
}

이 방법을 전송하는 매개 변수는 ApplicationRef와 시작 구성 요소의 이름입니다. 변수bootstrap를 정의하여 모든 가능한 시작 구성 요소를 비추고 구성 요소 선택기를 키로 합니다. 서버에서 필요한 정보를 얻은 후에 이 정보에 따라 어떤 구성 요소 종류인지 조회합니다.
먼저 bootstrapRootComponent 방법을 구축하여 ApplicationRef 요청을 시뮬레이션합니다. 이 요청은 2초 후에 options 구성 요소 선택기 즉 fetch 문자열로 되돌아옵니다.

function fetch(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('b-comp');
    }, 2000);
  });
}

현재 우리는 HTTP 방법으로 구성 요소를 시작하고 B 모듈의 b-comp 방법에서 이 시작 방법을 사용하자.

export class AppModule {
  ngDoBootstrap(app) {
    fetch('url/to/fetch/component/name')
      .then((name)=>{ this.bootstrapRootComponent(app, name)});
  }
}

여기에서 나는 이 해결 방법을 검증하기 위해 Stackblitz demo를 만들었다.(역자주: 역자는 이 저자의 데모에서angular버전을 최신 버전 5.2.9로 업그레이드하여angular-bootstrap-process를 볼 수 있으며, 2초 후 서버에 따라 정보를 되돌려 사용자 정의 시작bootstrap)
AOT에서 일할 수 있을까요?
물론입니다. 모든 구성 요소를 미리 컴파일하고, 구성 요소의 공장 클래스를 사용해서 프로그램을 시작해야 합니다.

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
    };
    ...

AppModule 속성에 구성 요소를 등록할 필요가 없다는 것을 기억하십시오. 이미 구성 요소의 공장 클래스가 있기 때문에 Angular Compiler를 통해 구성 요소를 컴파일하여 구성 요소의 공장 클래스를 얻을 필요가 없습니다.(역자 주: ngDoBootstrap는 Angular AOT Compiler에서 생성된 것으로 최신 Angular 버전은 CLI에 이 정보를 숨기고 메모리에 xxx를 임시로 생성했다.factory.ts 파일은 이전 버전과 달리 명령을 통해 이 중간 임시 파일을 물리적으로 생성하여 하드디스크에 저장할 수 있습니다.