Angular 2
एंगुलर 2 के साथ आगे का समय (एओटी) संकलन

1. संकलक के साथ कोणीय 2 निर्भरता स्थापित करें

नोट: सर्वोत्तम परिणामों के लिए, सुनिश्चित करें कि आपकी परियोजना कोणीय-सीएलआई का उपयोग करके बनाई गई थी।

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. भागो एनजीसी, कोणीय संकलक

अपनी परियोजना की जड़ से ./node_modules/.bin/ngc -p src जहां src वह स्थान है जहाँ आपके सभी कोणीय 2 कोड रहते हैं। यह एक ऐसा फ़ोल्डर उत्पन्न करेगा, जिसे ngfactory कहा ngfactory जहां आपके सभी संकलित कोड लाइव होंगे।

विंडोज़ के लिए "node_modules/.bin/ngc" -p src

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);

इस बिंदु पर आपको अपनी परियोजना चलाने में सक्षम होना चाहिए। इस मामले में, मेरी परियोजना कोणीय-सीएलआई का उपयोग करके बनाया गया था।

> ng serve

हमें संकलन की आवश्यकता क्यों है, घटनाओं का प्रवाह संकलन और उदाहरण?

प्र। हमें संकलन की आवश्यकता क्यों है? उत्तर:। हमें अपने कोणीय अनुप्रयोगों की उच्च स्तर की दक्षता प्राप्त करने के लिए संकलन की आवश्यकता है।

निम्नलिखित उदाहरण पर एक नज़र डालें,

// ...
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);
// ...

समय-समय पर संकलन के साथ घटनाओं का प्रवाह

इसके विपरीत, एओटी के साथ हम निम्नलिखित चरणों के माध्यम से प्राप्त करते हैं:

1. टाइपस्क्रिप्ट के साथ कोणीय 2 अनुप्रयोग का विकास।
2. एनजीसी के साथ आवेदन का संकलन।
3. टाइपस्क्रिप्ट के लिए कोणीय संकलक के साथ टेम्पलेट्स का संकलन करता है।
4. जावास्क्रिप्ट के लिए टाइपस्क्रिप्ट कोड का संकलन।
5. बंडलिंग।
6. Minification।
7. तैनाती।

यद्यपि उपरोक्त प्रक्रिया हल्के से अधिक जटिल लगती है, उपयोगकर्ता केवल चरणों के माध्यम से जाता है:

1. सभी संपत्तियां डाउनलोड करें।
2. कोणीय बूटस्ट्रैप्स।
3. आवेदन प्रदान किया जाता है।

जैसा कि आप देख सकते हैं कि तीसरा चरण गायब है जिसका अर्थ है तेज / बेहतर UX और उस के शीर्ष पर कोणीय 2-बीज और कोणीय-क्ली जैसे उपकरण निर्माण प्रक्रिया को नाटकीय रूप से स्वचालित करेंगे।

मुझे आशा है कि यह आपकी मदद कर सकता है! धन्यवाद!

कोणीय सीएलआई के साथ एओटी संकलन का उपयोग करना

Angular CLI कमांड-लाइन इंटरफ़ेस में बीटा 17 के बाद से AoT संकलन समर्थन है।

AoT संकलन के साथ अपना ऐप बनाने के लिए, बस चलाएं:

ng build --prod --aot