Angular-cli: AoT Freezes

[Richard87]

ng serve --aot freezes after compiling 85 modules.

OS?

Windows 10 (Rinning with Admin priviliges)

Versions.

ng --version
angular-cli: 1.0.0-beta.16
node: 6.3.0
os: win32 x64

Repro steps.

started with RC4 (created with angular-cli) and upgraded to final (2.0.1)

The log given by the failure.

Freezes:
ng serve --aot
* NG Live Development Server is running on http://localhost:4200. *
20% building modules 85/85 modules 0 active

[zackarychapple]

I had the exact same percentage stopping point in one of my repos. Just out of curiosity are you pulling in Material2 or do you have images in your application that are directly referenced in the templates / css?

[zackarychapple]

I was able to replicate this issue by pulling in material2 into a cleanly generated cli app. I am experiencing the same issue with an internal component library, so this doesn't seem to be an issue with material2 itself.

angular-cli: 1.0.0-beta.16
node: 6.3.1
os: darwin x64

https://github.com/zackarychapple/cli-aot-material

[Richard87]

Hi,  not material2,  but I am using ng2-bootstrap,  but I'm including the css in my styles.scss files.  I'm not sure if ng2-bootstrap is including anything else...

Richard

[zackarychapple]

Another interesting note, removing the import of material2 from the application both import { MaterialModule } from '@angular/material'; and MaterialModule.forRoot() the build still freezes at 20% building modules 85/85 modules 0 active it is only when removing material from node_modules/@angular that the build is able to progress again. @hansl

[tomwanzek]

@zackarychapple I experienced the same issue with angular-cli beta.16 when pulling in material2 alpha9-3.

If I run ng build --aot, it does not just freeze like ng serve --aot, but rather throws an error pointing at material2:

10% building modules 8/16 modules 8 active ...ode_modules\style-loader\addStyles.jsc:/Users/path/to/project/node_modules/@angular/material/list/list.css:214
.map*/
^
SyntaxError: Unexpected token .
    at WebpackResourceLoader._evaluate (c:\Users\path\to\project\node_modules\@ngtools\webpack\src\resource_loader.js:75:24)
    at c:\Users\path\to\project\node_modules\@ngtools\webpack\src\resource_loader.js:95:52

[Richard87]

Hmm, I also got a new exception when running ng build --aot:

ng build --aot
 10% building modules 4/6 modules 2 active ...osjekt\phono-frontend\src\styles.scssError: DashboardModule is not an NgModule
    at NgcWebpackPlugin.getNgModuleMetadata (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:121:19)
    at NgcWebpackPlugin._processNgModule (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:109:42)
    at C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:114:34
    at Array.reduce (native)
    at NgcWebpackPlugin._processNgModule (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:111:29)
    at C:\Users\richa\Prosjekt\phono-frontend\node_modules\@ngtools\webpack\src\plugin.js:96:37
 10% building modules 5/6 modules 1 active ...osjekt\phono-frontend\src\styles.scss

For the record, my DashboardModule Looks like this:

import {FormsModule} from "@angular/forms";
import {NgModule} from "@angular/core";
import {RouterModule, Routes} from "@angular/router";
import {DashboardComponent} from "./dashboard.component";
import {HomeComponent} from "./home/home.component";
import {ProfileComponent} from "./profile/profile.component";
import {BillingComponent} from "./billing/billing.component";
import {AdministrationComponent} from "./administration/administration.component";
import {LoggedInGuard} from "../Security/logged-in.guard";
import {AdminGuard} from "../Security/admin.guard";
import {CommonModule} from "@angular/common";
import {StatusPanelComponent} from "./status-panel/status-panel.component";

export const dashboardRoutes:Routes = [{
    path: 'dashboard',
    component: DashboardComponent,
    children: [
        { path: '', component: HomeComponent,canActivate: [LoggedInGuard]},
        { path: 'profile', component: ProfileComponent, canActivate: [LoggedInGuard] },
        { path: 'billing', component: BillingComponent, canActivate: [LoggedInGuard, AdminGuard] },
        { path: 'administration', component: AdministrationComponent, canActivate: [LoggedInGuard, AdminGuard] },
    ],
    canActivate: [LoggedInGuard]
}];

@NgModule({
    imports: [
        FormsModule,
        RouterModule.forChild(dashboardRoutes),
        CommonModule,
    ],
    providers: [
        AdminGuard
    ],
    declarations: [
        HomeComponent, StatusPanelComponent,DashboardComponent,ProfileComponent,AdministrationComponent,BillingComponent
    ]
})
export class DashboardModule {}

[Richard87]

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

[tomwanzek]

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.

[tomwanzek]

Just one more brief comment re: item 1 above. The mentioned compile time errors can be fixed by adding 'spurious' imports of the missing names (interfaces, classes or the like.) They are spurious in that they are not _explicitly_ required in the module for which the error is thrown. This implies TSLint warnings of unused names in turn, but at least it compiles.

[filipesilva]

@tomwanzek I'm glad to hear you managed to get some progress. We'll investigate the remaining issues.

[drager]

Experiencing the same issue as @Richard87. Do you have any progress on this? Using beta.17.

[naveedahmed1]

Any update on this? I am also receiving "HomeModule is not an NgModule
Error: HomeModule is not an NgModule at AotPlugin.getNgModuleMetadata"

[FoodBuster]

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.

[FoodBuster]

@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 {}

[drager]

@FoodBuster: Yeah, I have a setup like this. Problem was not that though. When I run ng serve --aot it still freezes. Using ng build --aot gives me errors and then is unresponsive but ng build show me errors.

[zackarychapple]

Updating to beta.18 and doing a 'ng init' update resolved this issue for me.

[Richard87]

After alot of changes, I got a step closer (ngc -p works, and I have upgraded all the code pr the documentation), the only thing I have _not_ done is configure rollup.js...

Now when I run ng serve --aot (no matter which configuration build/prod etc) I get this error message:

ENOENT: no such file or directory, stat 'C:\Users\richa\Prosjekt\phono-frontend\src\aot\app\app.module.ngfactory'

Now this file exists: C:\Users\richa\Prosjekt\phono-frontend\src\aot\app\app.module.ngfactory.ts so I asume there is another bug somewhere...

[naveedahmed1]

@FoodBuster thank you for the suggestion it did fix the errors and compilation seems to complete without any error. But the dist folder has just inline, main and style bundle, there are around 23 .map files but no other javascript bundle. Running the app for the generated files throws below error "EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module.ngfactory'"

Any suggestions?

[FoodBuster]

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

I have seen few posts which says the AoT works with Angular CLI, Can you please tell me is there any difference between the lazy loading routes that we generate when using systemjs and the lazy loading routes that we generate when using webpack?

[FoodBuster]

@naveedahmed1 Unfortunately, I don't know if there's a difference. I'm on the webpack cli. On the aot and lazy loading issue, check #2735 for updates.

[mwawrusch]

@FoodBuster thanks for pointing that out. I was banging my head why I couldn't get it to work. @team please be more descriptive in error messages.

[elvirdolic]

@FoodBuster thx for the hint. This solves the problem with X Module is not a NgModule

[unsafecode]

@elvirdolic I did not understand how you actually solved this issue. Can you explain?

[elvirdolic]

"Convert all routing files to ngModules. Previously, I had routing files that exported routes but didn't contain all the ngModule metadata."

this is what I have done.

[unsafecode]

@elvirdolic Thanks. Unfortunately, I already have this coding style in place, but still getting trouble with AoT and lazy routes.

[elvirdolic]

lazy routes and AOT are not supported in the latest release. This task
solves only the NgModule is not a module issue. We also wait for the next
release to fix it. I will try with master today maybe I can provide some
feedback.

2016-11-10 12:35 GMT+01:00 unsafecode [email protected]:

@elvirdolic https://github.com/elvirdolic Thanks. Unfortunately, I
already have this coding style in place, but still getting trouble with AoT
and lazy routes.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/2515#issuecomment-259668412,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQ8j8iWis09mL0UJnAOT5_n5xRAE_Zunks5q8wGMgaJpZM4KOZdb
.

[unsafecode]

@elvirdolic In the end I managed to solve this issue as well, but as you said, lazy routes and AoT simply don't play together. I also tried out the master branch, but much like the hidden @ngtools/[email protected] version of npm, it breaks due to the done promise being uninitialized.

[aggarwalankush]

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

[hansl]

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

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