Angular 2 / 4 / 5 – Ahead-of-time compilation how to

by

Both the JIT and AOT compilers generate an AppModuleNgFactory class from the same AppModule source code.

The JIT compiler creates that factory class on the fly, in memory, in the browser. The AOT compiler outputs the factory to a physical file that we’re importing here in the static version of main.ts

At a high level, @angular/compiler-cli provides a wrapper around Typescript’s tsc compiler, and both AoT compiles your application’s code, and then transpiles your application’s Typescript to Javascript:

$ ngc -p src

This generates a new file for each component and module ( called an NgFactory )

To run your app in AoT mode,
all that’s required is changing your main.ts file from

import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’
import {MyAppModule} from ‘./app’
platformBrowserDynamic().bootstrapModule(MyAppModule);

to

import {platformBrowser} from ‘@angular/platform-browser’
import {MyAppModuleNgFactory} from ‘./app.ngfactory’ //generated code
platformBrowser().bootstrapModuleFactory(MyAppModuleNgFactory);

EDIT:

To use ngc command, first install these-

$ npm install @angular/compiler-cli typescript@next @angular/platform-server @angular/compiler

ngc is a drop-in replacement for tsc which you will find it in- ./node_modules/.bin/ngc folder.

More Related Contents:

  1. Dynamically add event listener
  2. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  3. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  4. Use component from another module
  5. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  6. Angular and Typescript: Can’t find names – Error: cannot find name
  7. Angular 2 Scroll to top on Route Change
  8. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  9. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  10. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  11. async/await in Angular `ngOnInit`
  12. How to inject service into class (not component)
  13. Emit event from parent to child
  14. Angular2 router keep query string
  15. Angular 2 ‘component’ is not a known element
  16. How to make a sequence of http requests in Angular 6 using RxJS
  17. How to set unique template reference variables inside an *ngFor? (Angular)
  18. Getting Image from API in Angular 4/5+?
  19. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  20. Angular 4 HttpClient Query Parameters
  21. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  22. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  23. Type casting within a template in Angular 2
  24. Subscribing to a nested Observable
  25. Angular 2 translation change language in application
  26. Enabling CORS on Azure Active Directory
  27. How to declare a pipe globally to use in different modules?
  28. How to return value inside subscribe Angular 4
  29. How to change angular material datepicker format
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment