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.