5

It was my understanding that during ng build AOT compilation is used by default and that only in development (ng serve) you are required to set --aot flag.

But right now I have a project in front of me which makes use of classes and methods from the @angular/compiler at multiple locations. Nevertheless the outcome of 'ng build' with production: true in the environment works without any failures and seems to be aware of the compiler. If I use 'ng serve --aot' however I receive the expected 'Uncaught Error: Runtime compiler is not loaded'.

So what's the deal? Is AOT used by default or not.

BTW: The project uses Angular version ^4.0.0.

Edit

@Melou and @PierreDuc showed me where I was wrong: ng build --prodis not the same as ng build -e prod. The production setting in the environment does not change the compilation process. --prod also sets --target=production which will trigger the AOT compilation.

hvsp
  • 327
  • 4
  • 12
  • This commit looks relevant: https://github.com/angular/angular-cli/pull/4105 I can't find the page that said it, but I read recently that AOT is no longer required to be specified. – aaron-bond Jun 13 '17 at 10:00
  • This is exactly what puzzles me, everyone says setting -aot flag is not required anymore. But the project in front of me uses the compiler and should therefore fail to work properly when compiled with 'ng build'. But it does not and the Compiler is apparently available. – hvsp Jun 13 '17 at 10:07

2 Answers2

5

The AOT is not used by default using the build command. Only when you add the --prod parameter. This will set the --target to production, enables AOT and disables sourcemapping:

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
  • Exactly, I forgot to specify that it's default in prod mode. – Melou Jun 13 '17 at 10:25
  • Correct me if I'm wrong, but this is the same as using build with an environment in which 'production: true' is set. – hvsp Jun 13 '17 at 10:27
  • @hsvp I'll correct you, because you are wrong :) as far as i know, the environment variables are only used within your own source files. For instance the `production` parameter is used within `main.ts` to make sure `enableProdMode` is turned on. This is triggered by using `--environment` option. To create a production build however, you should use `--prod`. This will turn on AoT and disable sourcemaps – Poul Kruijt Jun 13 '17 at 11:56
  • Ahhh! Now I see, I was under the impression that `ng build --prod` was just a short form of `ng build -e prod` (which already is pretty short I have to admit). All these flags got me confused and I was forgetting about the `target` flag. Would you mind mentioning the target flag in your answer? I will accept it. – hvsp Jun 13 '17 at 12:33
2

If you use Angular 4.0.0 you must be on angular-cli > 1.0.0, which uses aot by default in prod mode.

Angular-cli replaces part of your code to make it work.

For example in your main.ts you use bootstrapModule, which get replaced by bootstrapModuleFactory.

If you check the dist/main.xxxxx.bundle.js that is generated (for example with a tool like grep grep bootstrapModuleFactory main.xxxxx.bundle.js), you will see the call to bootstrapModuleFactory

Melou
  • 874
  • 6
  • 10
  • I know it is supposed to do that but it is not. The main.bundle.js still uses `bootstrapModule` and *not* `bootstrapModuleFactory`. So what am I missing here? An environment with production set to true should be enough, right? – hvsp Jun 13 '17 at 10:36
  • 1
    Environment is different from target. Environment is to specify which config file to use. Target is how to build the app. -prod is the same as --target=production – Melou Jun 13 '17 at 11:56
  • Sorry. I saw your comment later, otherwise would have marked yours as the accepted answer. Thanks for sharing the simple method to find out if AOT is used or not. – hvsp Jun 13 '17 at 12:47