Angular 2
각도 2의 Ahead (Ahead-of-time) 컴파일

1. 컴파일러에 Angular 2 의존성을 설치하십시오.

참고 : 최상의 결과를 얻으려면 프로젝트가 Angular-CLI를 사용하여 작성되었는지 확인하십시오.

npm install angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,router,forms,compiler-cli,tsc-wrapped,platform-server}

프로젝트에 이미 각도 2가 있고 이러한 종속성이 모두 설치된 경우이 단계를 수행하지 않아도됩니다. compiler 가 거기에 있는지 확인하십시오.

2.`tsconfig.json` 파일에`angularCompilerOptions`를 추가하십시오.

...
"angularCompilerOptions": {
    "genDir": "./ngfactory"
}
...

컴파일러의 출력 폴더입니다.

3. 각도 컴파일러 인 ngc를 실행합니다.

./node_modules/.bin/ngc -p src 여기에서 src 는 모든 각도 2 코드가있는 곳입니다. 그러면 컴파일 된 코드가 모두 ngfactory 되는 ngfactory 라는 폴더가 생성됩니다.

"node_modules/.bin/ngc" -p src for windows

4. NgFactory와 정적 플랫폼 브라우저를 사용하기 위해`main.ts` 파일을 수정하십시오.

// this is the static platform browser, the usual counterpart is @angular/platform-browser-dynamic.
import { platformBrowser } from '@angular/platform-browser';

// this is generated by the angular compiler
import { AppModuleNgFactory } from './ngfactory/app/app.module.ngfactory';

// note the use of `bootstrapModuleFactory`, as opposed to `bootstrapModule`.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

이 시점에서 프로젝트를 실행할 수 있어야합니다. 이 경우 Angular-CLI를 사용하여 프로젝트를 만들었습니다.

> ng serve

왜 우리는 컴파일이 필요합니까, 이벤트 컴파일과 예제의 흐름?

Q. 컴파일이 필요한 이유는 무엇입니까? Ans. Angular 응용 프로그램의 높은 수준의 효율성을 달성하려면 편집이 필요합니다.

다음 예제를 살펴보면,

// ...
compile: function (el, scope) {
  var dirs = this._getElDirectives(el);
  var dir;
  var scopeCreated;
  dirs.forEach(function (d) {
    dir = Provider.get(d.name + Provider.DIRECTIVES_SUFFIX);
    if (dir.scope && !scopeCreated) {
      scope = scope.$new();
      scopeCreated = true;
    }
    dir.link(el, scope, d.value);
  });
  Array.prototype.slice.call(el.children).forEach(function (c) {
    this.compile(c, scope);
  }, this);
},
// ...

위의 코드를 사용하여 템플릿을 렌더링하면,

<ul>
  <li *ngFor="let name of names"></li>
</ul>

다음과 비교할 때 훨씬 느립니다.

// ...
this._text_9 = this.renderer.createText(this._el_3, '\n', null);
this._text_10 = this.renderer.createText(parentRenderNode, '\n\n', null);
this._el_11 = this.renderer.createElement(parentRenderNode, 'ul', null);
this._text_12 = this.renderer.createText(this._el_11, '\n  ', null);
this._anchor_13 = this.renderer.createTemplateAnchor(this._el_11, null);
this._appEl_13 = new import2.AppElement(13, 11, this, this._anchor_13);
this._TemplateRef_13_5 = new import17.TemplateRef_(this._appEl_13, viewFactory_HomeComponent1);
this._NgFor_13_6 = new import15.NgFor(this._appEl_13.vcRef, this._TemplateRef_13_5, this.parentInjector.get(import18.IterableDiffers), this.ref);
// ...

사전 컴파일을 통한 이벤트 흐름

반대로 AoT를 사용하면 다음 단계를 수행합니다.

1. TypeScript로 Angular 2 응용 프로그램 개발.
2. ngc를 사용하여 응용 프로그램을 컴파일합니다.
3. TypeScript에 대한 각도 컴파일러를 사용하여 템플릿을 편집합니다.
4. TypeScript 코드를 JavaScript로 컴파일합니다.
5. 번들링.
6. Minification.
7. 전개.

위의 프로세스가 가볍게 복잡해 보이지만 사용자는 다음 단계로 만 이동합니다.

1. 모든 자산을 다운로드하십시오.
2. 각성 부트 스트랩.
3. 응용 프로그램이 렌더링됩니다.

알 수 있듯이 세 번째 단계는 빠져 있습니다. 즉 더 빠르고 더 나은 UX를 의미하며 angle2-seed 및 angular-cli와 같은 도구 위에 빌드 프로세스를 극적으로 자동화합니다.

나는 그것이 당신을 도울지도 모른다는 것을 희망한다! 고맙습니다!

각도 CLI로 AoT 컴파일 사용

Angular CLI 명령 줄 인터페이스에는 베타 17 이후 AoT 컴파일 지원이 있습니다.

AoT 컴파일로 앱을 빌드하려면 다음을 실행하십시오.

ng build --prod --aot