Angular-cli: Support for AoT compilation

[elvirdolic]

Are there any plans to support AoT compilation in angular-cli?

[deebloo]

@elvirdolic i believe AoT compilation is a perquisite to declaring an 1.0 release. So while it is not there right now it will be there as we approach an official release of angular2

[filipesilva]

We definitely plan on having it, but I don't have a timeline to give. It's a big thing on our radar though.

[deebloo]

@elvirdolic just an fyi I have gotten an angular-cli build working with AOT compilation so it is possible to roll it yourself for now if you want to play around with it.

[aminebizid]

@deebloo please provide us the steps to make AOT on cli webpack

[razvanmitre]

@deebloo it would be very useful to me too, and I am sure also to other people. Thanks!

[monfa-red]

Any luck with AOT?
We're using Angular2 in production, is there a hack to make it work with [email protected]?

[rolandoldengarm]

Yeah also interested.
Is this possible with the "old" systemjs angular-cli? As I can't upgrade to webpack due to some other issues.

[elvirdolic]

This repo provides some hacks. Check it out

https://github.com/brandonroberts/router-cli-aot/blob/master/README.md

[aminebizid]

@elvirdolic this is not webpack

[castamir]

I've just played with angular-cli all day and I must say that it is AWESOME 💯 ! But I miss the AoT compilation thu. Is there any progress? When can I expect a working prototype? Is it a matter of days or rather weeks? Thanks for your answer.

[elvirdolic]

Yes in the latest version you can try ng build --prod --aot. But its not officially described in the docs.

[castamir]

@elvirdolic 👍

I have a question... what is actually happen, when I add --aot flag? In angular.io docs, there is a tutorial for AoT compilation that includes 2 changes, one in tsconfig (for ngc) and second in main.ts (replace platform-browser-dynamic with platform-browser). If I do these changes, build with --aot stop working. If I keep them without any change, --aot works but I think that it still keeps platform-browser-dynamic in the bundle and loads JiT... isn't it?

edit: and if changes in tsconfig.json and main.ts are required, how can I change config for dev and production to use e.g. main.ts or main.aot.ts respectively?

[elvirdolic]

I think you don't have to change anything. This is the magic of angular-cli you don't have to worry about that. Use the flag and the rest will be done in the background. Aot is still in WIP. Lets wait for a official relase statement maybe there is some config change required.

[k1ng440]

i am sorry but what is AoT?

[hansl]

@elvirdolic: correct, there is NO config change needed for AoT, and we're making sure that it's backward compatible with your project. Some extreme cases might confuse our tooling so it will error out, but this should only happen if do strange things (such as declaring your classes but exporting them by another name, for example). If you follow the blueprints, and even if you do some code yourself, it should work just fine.

@k1ng440: AoT is ahead-of-time compilation. Look up "Angular 2 AoT" on youtube to see what's it about.

[jordic]

@hansl is this feature usuable?
Should I expect to run ng serve --aot and all is working? Or should I do something else?

[castamir]

@jordic ng build --prod --aot and ng serve --prod --aot works in beta.16, but there are still some issues to solve (like infinite server rebuild in ng serve --aot in development mode)

[zackarychapple]

@castamir didn't see the note the mention about infinite rebuild, was too excited about having AOT. Here is the issue for anyone curious https://github.com/angular/angular-cli/issues/2418

[Delagen]

@castamir not works aot with lazy routes

[jordic]

Ok @castamir. Not sure if this is the place to ask this, but when I launch ng serve --aot I've got this error:

Error encountered resolving symbol values statically. Reference to a non-exported function (position 17:10 in the original .ts file), resolving symbol MemoryBoardComponent

Are there any step I missed, or there is something in my codebase not properly defined/structured? May someone give and advice?

[dudko-av]

@jordic please, try this https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5#.l0sjpuwrx

[sebastian-heinz]

Hello i encountered an issue:

Error encountered resolving symbol values statically. Could not resolve type Window (position 11:39 in the original .ts file), resolving symbol

the window is from lib.d.ts as far as i can tell, this is my tsconfig

  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]

this is the relevant part from my .ts file

@Injectable()
export class SwService {

  private window: Window;

  constructor(@Inject(Window) window: Window) {
    this.window = window;
...

if i only change the Window-type to any inside the constructor parameters it works

@Injectable()
export class SwService {

  private window: Window;

  constructor(@Inject(Window) window: any) {
    this.window = window;

in my module.ts file i have following

  providers: [
    {provide: Window, useValue: window},
...

Any ideas why Window cannot be statically analyzed?

[castamir]

@sebastian-heinz what does your Window type look like?

this might help

[sebastian-heinz]

@castamir thank you for the headsup, i checked the article, but i still can not wrap my head around how to import the Window-Type from lib.d.ts properly.

if i follow the decleration of Window i get to

lib.d.ts

declare var Window: {
    prototype: Window;
    new(): Window;
}

so i tried to import it: (Before i did not had any import of Window, and the IDE would resolve it to the lib.d.ts file)

import {Window} from "typescript/lib/lib";

but this wont work as its not a module?

s/@angular/router/src/router_state.jsModuleNotFoundError: Module not found: Error: Can't resolve 'typescript/lib/lib' 

Im not sure how to do this, or if its necessary since it work with the any-Type

[filipesilva]

As an update, beta.16 had some support for --aot on ng serve/build, and beta.17 builds on that support. There might still be bugs, which is why we haven't really documented it yet.

[jmsegrev]

This pr #2470 added support for tsconfig baseUrl, with this you can use absolute path in your imports. It was part of beta.17 release, but in the pr, the autor commented that it did not work with --aot. . I migrated from AngularClass/angular2-webpack-starter, there I had an alias in webpack config, so all my code used absolute path in the imports. It would be great if the aot worked for this cases.

[monfa-red]

ng build --prod --aot still doesn't generate lazy chunks on 1.0.0-beta.19-3
It's been more than a month that AOT is in you milestones
Should I go try an angular-cli alternative?

[Meligy]

@monfa-red allow me to give some non-contributor thoughts about your answer.

• beta.19-3 does not support lazy loading in AoT. This is tracked by #2735, and has a supposed fix in master already (I haven't personally tested it yet). The fix should be available in the next release.
• Regarding the "more than a month", I won't go into reminding myself that we don't owe those guys anything, etc., but an interesting observation of the commit log makes me think most of the team is working on other things with higher priorities. This is a guess, not information.
• Should I go try an angular-cli alternative?

I'd suggest hanging around and seeing if next beta fixes it (or testing master). But if this doesn't work, it becomes your personal choice.

If a project seed solves your problems better, you can switch to it, and check on CLI in later time. Whether you should, is a decision only you know enough to make.

This differs from one project to another. For my project, I care about route and component generators to help newbie team more than I care about AoT in the short term so I'm sticking with the CLI and OK for now with what non-AoT prod build gives me. The decision for you depends on the different parameters your project have and it's definitely going to be a trade-off among various parameters.

One thing worth mentioning is that Angular, the framework and its team, support people using all kinds of seeds. They don't say "either CLI or don't talk to us, report issues, etc". The only situation I know of that's like that, is automatic code change upgrade that migrates breaking changes in Angular 3, which is planned to be in the CLI. But neither Angular 3 nor this support have even started, so, not a thing to worry about for now!

[Meligy]

OK. I tried this in beta.21.
https://github.com/Meligy/routing-angular-cli/tree/master

Still having issues with AoT.

ng build --aot

> ng b 10% building modules 5/6 modules 1 active ...de_modules/css-loader/lib/css-base.jsentry.split is not a function                                                                             
TypeError: entry.split is not a function
    at Function.ModuleRoute.fromString (/Users/Meligy/Code/github/Meligy/routing-angular-cli/node_modules/@ngtools/webpack/src/plugin.js:24:27)
    at /Users/Meligy/Code/github/Meligy/routing-angular-cli/node_modules/@ngtools/webpack/src/plugin.js:244:34
    at Array.map (native)
    at AotPlugin._processNgModule (/Users/Meligy/Code/github/Meligy/routing-angular-cli/node_modules/@ngtools/webpack/src/plugin.js:243:14)
    at /Users/Meligy/Code/github/Meligy/routing-angular-cli/node_modules/@ngtools/webpack/src/plugin.js:217:39

ng build -prod --aot

> ng build -prod --aot                          10% building modules 3/4 modules 1 active ...de_modules/css-loader/lib/css-base.jsentry.split is not a function                                    
TypeError: entry.split is not a function
    at Function.ModuleRoute.fromString (/Users/Meligy/Code/github/Meligy/routing-angular-cli/node_modules/@ngtools/webpack/src/plugin.js:24:27)
    at /Users/Meligy/Code/github/Meligy/routing-angular-cli/node_modules/@ngtools/webpack/src/plugin.js:244:34
    at Array.map (native)
    at AotPlugin._processNgModule (/Users/Meligy/Code/github/Meligy/routing-angular-cli/node_modules/@ngtools/webpack/src/plugin.js:243:14)
    at /Users/Meligy/Code/github/Meligy/routing-angular-cli/node_modules/@ngtools/webpack/src/plugin.js:217:39

ng serve --aot

This one only hangs with the following output

> ng serve --aot 
** NG Live Development Server is running on http://localhost:4200. **                   10% building modules 7/11 modules 4 active ...i/node_modules/webpack/hot/emitter.js(node:205 20% building modules 84/84 modules 0 active         

Remarks

CLI Version

This is tested with angular-cli beta.21 on macOS Sierra with Node v6.9.1 and NPM 4.0.2.

Sample Details

This is the following relevant app-routing.module.ts file:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import {SimpleRouteComponent} from './simple-route/simple-route.component';
import {BundledModule} from './bundled/bundled.module';

export function loadBundledModule() { return BundledModule; }

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: SimpleRouteComponent
  },
  {
    path: 'bundled',
    loadChildren: loadBundledModule
  },
  {
    path: 'lazy',
    loadChildren: './lazy/lazy.module#LazyModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

The AoT commands above only work when I comment the 2nd and 3rd routes, changing the definition of routes to be:

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: SimpleRouteComponent
  },
  // {
  //   path: 'bundled',
  //   loadChildren: loadBundledModule
  // },
  // {
  //   path: 'lazy',
  //   loadChildren: './lazy/lazy.module#LazyModule'
  // }
];

Note that this means that even loading other modules directly (not with lazy loading) is also not working with AoT, not just lazy loading.

Update

Coping @hansl because he was the last one I knew of working on this.

[Epotignano]

@Meligy I'm having exactly the same issue here

[jwuliger]

This is the same issue I am having and trying to work through. I am using beta 22-1 and the latest beta 23 @master but I cannot get lazy loading to work at all. I have been at this for hours... It does work in beta 21.

[barinovos]

Hmm.. I am using beta.24 and after running ng build -prod --aot I see no errors, build is completed, but... there is no AoT! main.*.bundle.js still contains all HTML templates and vendor file also contains Compiler code... So actually works completely without any AoT, just like a usual JIT...

[ryzy]

FYI, I just upgraded to angular-cli beta24 and Angular 2.4.0 on my test project https://github.com/ryzy/play-ng2-github/ and AoT seems to work perfectly fine. It loads in ~.5s compared to ~1.5s without AoT.

[hansl]

Closing this as obsolete. We've been supporting AOT for a while; bugs should have their own issues in GitHub from now on.

[hansl]

@ryzy we had people request that we don't remove decorators. It is using AOT and the Angular compiler isn't included, but the decorators are still there. Working towards the real solution.

[prabh08]

I often use AOT in my angular 2 app. But meanwhile I am facing the issue that as it gives the "Property 'staff_name' does not exist on type 'StaffRentListComponent' in my previous files history. Means it shows deleted code in ngfactory.ts (in AOT bundle folder) file and there is no code in my actual .ts file. Please let me know that how can I resolve this issue.

[ShadowManu]

@prabh08 This is a topic for another issue. Even more, since it seems a support request, a better fit would be StackOverflow (or gitter, which great people are normally active))

[MasthanRao]

@ryzy I tried downloading your github project for verifying AoT speed test. But somehow npm install doesnt work because of dependencies. Can you please let me know how do we verify Aot speed test? Do I need to replace platform-browser-dynamic with platform-browser in main.ts file?

[Rolice]

It seems that with AOT compilation, especially with Angular CLI, there is no window at the build time. I ended up with an option to implement a separate Window Service, which returns a window instance, to operate with.

Reference: http://stackoverflow.com/questions/34177221/angular2-how-to-inject-window-into-an-angular2-service

PS: Refering to the examples in the SO question above, you can directly implement the getWindow function inside the get property and make it static, i.e.:

import {Injectable} from "@angular/core";

@Injectable()
export class WindowService {
    static get window(): any {
        return window;
    }
}

[Davy-F]

Is the _bs-config.aot.ts_ file now deprecated / not required for aot to work? It's not mentioned in the documentation, but other websites make a reference to it. Nor is it included in the angular-cli.

@Rolice I know that the bs-config.aot.ts file (if is does get used) has an "open": false property. Setting this to true would open a window at build time.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}