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

前端 未结 2 1797
梦毁少年i
梦毁少年i 2020-12-02 10:09

I\'m trying to bootstrap my Angular 2 RC5 application following this guide https://angular.io/docs/ts/latest/guide/ngmodule.html Below is my code

import { A         


        
相关标签:
2条回答
  • 2020-12-02 10:27

    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.

    0 讨论(0)
  • 2020-12-02 10:40

    2017 UPDATE

    As of Janurary 2017 If using angular-cli, AOT compiling is now the default compilation method when running the following command ng build --prod with no code change requirements.

    If you want to disable AOT and instead use JIT in production, then you can use ng build --prod --no-aot.

    Source: https://github.com/angular/angular-cli/issues/4138


    This means that you can still use JIT compiling whilst developing (will compile faster so pretty handy) with ng build and leave your .ts as something like this:

    // The browser platform with a compiler
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    // The app module
    import { AppModule } from './app/app.module';
    
    // Compile and launch the module
    platformBrowserDynamic().bootstrapModule(AppModule);
    


    To Summarise:

    ng build                    // build with JIT
    ng build --prod --no-aot    // build with JIT 
    ng build --prod             // build with AOT
    
    0 讨论(0)
提交回复
热议问题