angular-cli: AoT Freezes

Closing this, it’s been fixed a while ago.

I have upgraded the project project I used as a reference in my comment above from beta.16 to beta.17. The build error (and corresponding serve freeze) are no longer present.

I ended up experiencing a few different issues instead. I will review other already open aot related issues to see if and where they fit. Just for a brief reference:

1. TS compile error Return type of public method from exported class has or is using name 'ABC' from external module "XYZ" but cannot be named. occurs repeatedly e.g. for name Observable Compiler errors of this sort do not occur with jit build.
2. Lazy loaded module(s) are not properly generated/loaded.

For me, ng build --aot freezes in ubuntu but working perfectly in MacOS. Seems like OS specific issue.

@naveedahmed1 Are you using lazy loading? As far as I know, AOT + lazy loading doesn’t work yet in angular-cli-generated projects (and it’s the big issue the cli team is working on). AOT requires a .ngfactory file for each ngModule, but the --aot flag only generates the .ngfactory file for the root module. We might just need to wait for a cli update on this one.

@naveedahmed1 @drager I may have a solution. I think you’re missing the @ngModule decorator and metadata on the routing modules. I took two steps (below) to solve my problem. They basically amount to following the official Angular routing guide (https://angular.io/docs/ts/latest/guide/router.html) religiously - apparently, it changed a bit from 2.0 to 2.1.

1. Angular 2 added in a naming mechanic for lazy-loading feature modules (adding “#{moduleName}” to the end of all loadChildren params in routing files). Adding in the module names got rid of my “null is not an ngModule” error.
2. Convert all routing files to ngModules. Previously, I had routing files that exported routes but didn’t contain all the ngModule metadata.

For example:

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

import { HomeComponent } from './home';

export const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'info', loadChildren: './info/info.module#InfoModule' },
];

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

I’ll add another: My main error is “null is not an ngModule” and apparently caused by css-loader:

14% building modules 35/37 modules 2 active ...[no]de_modules/css-loader/lib/css-base.jsnull is not an NgModule Error: null is not an NgModule at AotPlugin.getNgModuleMetadata

EDIT: Turns out that the css-loader error goes away whenever I remove any styles (including styles.css) from angular-cli.json. The AOT compiler probably has issues with modules loaded from that file.

Just tried with the updated beta-17, same issue…

c:\Users\richa\Prosjekt\phono-frontend>ng --version
    angular-cli: 1.0.0-beta.17
    node: 6.3.0
    os: win32 x64

c:\Users\richa\Prosjekt\phono-frontend>ng serve --aot
** NG Live Development Server is running on http://localhost:4200. **
 20% building modules 85/85 modules 0 active^CTerminate batch job (Y/N)? y

c:\Users\richa\Prosjekt\phono-frontend>ng serve --aot --prod
** NG Live Development Server is running on http://localhost:4200. **
 20% building modules 85/85 modules 0 active^CTerminate batch job (Y/N)? y

c:\Users\richa\Prosjekt\phono-frontend>ng build --aot
 10% building modules 4/6 modules 2 active ...osjekt\phono-frontend\src\styles.scssError: DashboardModule is not an NgModule
    at AotPlugin.getNgModuleMetadata (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:247:19)
    at AotPlugin._processNgModule (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:230:42)
    at AotPlugin._processNgModule (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:239:33)
    at C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:206:23
 10% building modules 5/6 modules 1 active ...osjekt\phono-frontend\src\styles.scssDashboardModule is not an NgModule
Error: DashboardModule is not an NgModule
    at AotPlugin.getNgModuleMetadata (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:247:19)
    at AotPlugin._processNgModule (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:230:42)
    at AotPlugin._processNgModule (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:239:33)
    at C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:206:23

EDIT ng serve --prod and ng build --prod works perfectly