Support for AoT compilation

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

@elvirdolic

@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

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

@elvirdolic

@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.

@deebloo

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

@deebloo

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

Any luck with AOT?
We're using Angular2 in production, is there a hack to make it work with angular-cli@1.0.0-beta.14?

This repo provides some hacks. Check it out

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

@elvirdolic

@elvirdolic this is not webpack

@hansl

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.

@Meligy

@Meligy I'm having exactly the same issue here

@master

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.

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...

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.

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

@ryzy

@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.

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.

@prabh08

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

@ryzy

@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?

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

@Rolice

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.

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.}

Navigation Menu

Repository navigation

Support for AoT compilation #1732

23 remaining items

ng build --aot

ng build -prod --aot

ng serve --aot

Remarks

CLI Version

Sample Details

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support for AoT compilation #1732

Description

Activity

deebloo commented on Aug 17, 2016

filipesilva commented on Aug 23, 2016

deebloo commented on Aug 28, 2016

aminebizid commented on Aug 28, 2016

razvanmitre commented on Sep 4, 2016

monfa-red commented on Sep 15, 2016

elvirdolic commented on Sep 15, 2016

aminebizid commented on Sep 18, 2016

23 remaining items

Meligy commented on Nov 24, 2016

ng build --aot

ng build -prod --aot

ng serve --aot

Remarks

CLI Version

Sample Details

Epotignano commented on Dec 15, 2016

jwuliger commented on Dec 17, 2016

barinovos commented on Dec 21, 2016

ryzy commented on Dec 21, 2016

hansl commented on Dec 21, 2016

hansl commented on Dec 21, 2016

prabh08 commented on Jan 27, 2017

ShadowManu commented on Jan 27, 2017

MasthanRao commented on Feb 27, 2017

Rolice commented on Mar 24, 2017

Davy-F commented on Jun 16, 2017

angular-automatic-lock-bot commented on Sep 7, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions