Angular-cli: @ngtools/webpack complainning about not an NgModule

Created on 16 Nov 2016 · 71Comments · Source: angular/angular-cli

using @ngtools/webpack 1.1.7
tried both @angular/compiler-cli 2.1.x and 2.2.0

import { NgModule, Component } from '@angular/core';

@Component({
  selector: 'app',
  template: '<h1>hello world</h1>',
  styles: []
})
class AppComponent {}

@NgModule({
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Error: AppModule is not an NgModule
    at AotPlugin.getNgModuleMetadata (/var/build/node_modules/@ngtools/webpack/src/plugin.js:297:19)
    at AotPlugin._processNgModule (/var/build/node_modules/@ngtools/webpack/src/plugin.js:241:42)
    at /var/build/node_modules/@ngtools/webpack/src/plugin.js:217:39
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:394:7)
Done in 7.29s.

Source

princemaple

👍29

Most helpful comment

Dear Angular team, maybe it's not obvious, but it's a very dangerous bug - when users can't build production build, it means development of their projects is stopped. And it's not so easy to explain to product owners why it's impossible (for now) to implement minor changes (even if task is just edit text).
And this bug is not even labeled.
Please, give some attention to this bug. I understand you have a lot of tasks, but it's really important bug.

e-oz on 6 Dec 2016

👍34 👎3 ❤1

All 71 comments

@princemaple can you paste your AotPlugin configuration, please?

marinho on 17 Nov 2016

oops, I missed this is an angular-cli related.

Without it (i.e. just using @ngtools/webpack), that error message would appear if entryModule points to the wrong path (i.e. ' ./src/app/app.module#AppModule' must be a valid path)

marinho on 17 Nov 2016

I had a very simple minimal AotPlugin config, something like

new ngtools.AotPlugin({
  tsConfigPath: '/var/build/tsconfig.json',
  entryModule: '/var/build/src/app.module#AppModule'
})

princemaple on 17 Nov 2016

Note I used absolute paths, because I saw some commits in this repo saying something about relative paths not working. I am pretty sure my path was valid.

princemaple on 17 Nov 2016

I see. In that case, I have no more to add.

marinho on 17 Nov 2016

I have the same problem here. I also configured it like @princemaple. BTW: I have not defined any entry point.

janwo on 17 Nov 2016

@marinho thanks for taking a look still!

princemaple on 17 Nov 2016

AotPlugin.prototype.getNgModuleMetadata = function (staticSymbol) {
    var ngModules = this._reflector.annotations(staticSymbol).filter(function (s) { 
        return s instanceof core_1.NgModule; 
    });
    if (ngModules.length === 0) {
        throw new Error(staticSymbol.name + " is not an NgModule");
    }
    return ngModules[0];
};

Whereas staticSymbol is...

{
  filePath: '/Users/***skipped***/client/app/app.module.ts',
  name: 'AppModule',
  members: undefined 
}

...and this._reflector.annotations(staticSymbol) is [].

Seems like the annotations are not set correctly? The path is valid.

janwo on 17 Nov 2016

@janwo did you try without ".ts" in filePath?

When enabling AoT, it didn't pass because I had some imports with .ts in the end. I just removed in all lines it found and it didn't complain anymore. Maybe it's the same case.

BTW, I still don't have my app successfully in AoT. I'm also learning in this topic at this very moment.

marinho on 18 Nov 2016

@marinho Thanks for your response. Yes, its all without a suffix. Somehow it works now, I deleted my node_modules folder and installed all dependencies again. It's weird as I updated them before as well.

janwo on 18 Nov 2016

I have the same problem, see https://github.com/angular/angular-cli/issues/2667

dhardtke on 18 Nov 2016

Im also getting the same. If I build a new project using ng new and run -aot on that, it works fine - but on my own project im getting Error: AppModule is not an NgModule. I have removed everything from my AppModule and AppComponent.

mashhoodr on 22 Nov 2016

I have the problem with the AotPlugin for Webpack...

dhardtke on 22 Nov 2016

It seems like [email protected] is causing the issue. Downgrading to 2.0.10 seems to make it pick up the metadata correctly.

jessezhang91 on 22 Nov 2016

😕8 🎉5

Strangely, this error shows up on 2.2.4 but not 2.2.3.

zakdances on 2 Dec 2016

For me downgrading to [email protected] worked, just like jessezhang91 suggested.

dhardtke on 2 Dec 2016

😕2 👍1

@zakdances thanks for heads up. Will skip this update :) Previous dancing with this error is hard to forget.

e-oz on 2 Dec 2016

Downgrading to 2.0.12 didnt work for me. :( When I run ng server --aot I still get this error. (double checked the installed version as well)

mashhoodr on 2 Dec 2016

2.0.12 != 2.0.10

dhardtke on 2 Dec 2016

👍2

Sorry, I meant to write 2.0.10.

mashhoodr on 2 Dec 2016

@zakdances downgrading all packages to 2.2.3 didn't work for me..:( Which packages did you downgraded to 2.2.3 exactly?? Thanks

DutchKevv on 3 Dec 2016

@DutchKevv make sure you downgrade router to 3.2.3 or so as well.

jessezhang91 on 3 Dec 2016

Thanks Jess, but didn't get it to work..

Using these packages ->

"@angular/common": "2.2.3",
"@angular/compiler": "2.2.3",
"@angular/core": "2.2.3",
"@angular/forms": "2.2.3",
"@angular/http": "2.2.3",
"@angular/platform-browser": "2.2.3",
"@angular/platform-browser-dynamic": "2.2.3",
"@angular/router": "3.2.3",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^2.0.0",
"@ngrx/store": "2.2.1",
"@ngrx/store-devtools": "^3.2.1",
"@ngrx/store-log-monitor": "^3.0.2",

Probably just wait until Typescript and Angular are friends again on final releases.. But can't build production now :(

DutchKevv on 4 Dec 2016

@DutchKevv try to rm -rf npm_modules && npm cache clean before installation.

e-oz on 4 Dec 2016

I think this issue is related to [email protected] and tsc-wrapped as dhardtke and jessezhang91 said.

In https://github.com/angular/angular/blob/2.2.x/tools/@angular/tsc-wrapped/src/collector.ts#L254 , which collects metadata from app.module.ts ,

        case ts.SyntaxKind.ClassDeclaration:
          const classDeclaration = <ts.ClassDeclaration>node;
          if (classDeclaration.name) {
            const className = classDeclaration.name.text;
            if (node.flags & ts.NodeFlags.Export) { // this is false always! 
              if (classDeclaration.decorators) {
                if (!metadata) metadata = {};
                metadata[className] = classMetadataOf(classDeclaration);
              }
            }
          }

this code works only if node.flags & ts.NodeFlags.Export g.t. 0. But in https://github.com/Microsoft/TypeScript/blob/v2.1.1/src/compiler/types.ts#L400 , there is no export enum named Export. (In [email protected] ts.NodeFlags has the Export value. see https://github.com/Microsoft/TypeScript/blob/v2.0.10/src/compiler/types.ts#L395 )

Quramy on 4 Dec 2016

I'm getting the same error using TypeScript 2.0.10, trying to link modules from 1 app into another. Both are generated using angular-cli version 1.0.0-beta.22.

beeman on 6 Dec 2016

Yep same problem here with "typescript": "2.0.10" and "angular-cli": "1.0.0-beta.22-1" any solutions ?

tarlepp on 6 Dec 2016

not working even with typescript 2.0.10, using @ngtools/webpack 1.1.9

0% compilingError: AppModule is not an NgModule
    at AotPlugin.getNgModuleMetadata (/Users/antony/Documents/Code/Web/angular-webpack-starter/node_modules/@ngtools/webpack/src/plugin.js:332:19)
    at AotPlugin._processNgModule (/Users/antony/Documents/Code/Web/angular-webpack-starter/node_modules/@ngtools/webpack/src/plugin.js:271:42)
    at /Users/antony/Documents/Code/Web/angular-webpack-starter/node_modules/@ngtools/webpack/src/plugin.js:242:39

reproduction repo, just update the package.json for ngtools and angular packages

fixed, following updates from https://github.com/angular/angular-cli/commit/45d5154

antonybudianto on 6 Dec 2016

@tarlepp @antonybudianto Workaround: Specify the precise dependency versions in the package.json.

timosalm on 6 Dec 2016

@timosalm already did, it's breaking after @ngtools 1.1.6

antonybudianto on 6 Dec 2016

e-oz on 6 Dec 2016

👍34 👎3 ❤1

Here're my dependencies. They seem to be working with no issues

@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@ngtools/[email protected]
[email protected]

jessezhang91 on 6 Dec 2016

@timosalm And what are those "precise dependency versions" I only updated "angular-cli" to latest and that broke all. Changes here

tarlepp on 6 Dec 2016

@tarlepp I've created a separate issue for this issue introduced by angular-cli version 1.0.0-beta.22 : #3426

beeman on 6 Dec 2016

same problem:

angular 2.2.4

"@ngtools/webpack": "1.1.9",
"typescript": "^2.0.10",
"webpack": "^2.1.0-beta.27"

vascofernandes on 6 Dec 2016

Please check https://github.com/angular/angular-cli/issues/3426#issuecomment-265277988 for a solution.

jkuri on 6 Dec 2016

I've just today started to work with ngc and am hitting this same error.

I also stripped back my entryModule to the bare minimum.

import { NgModule, Component } from '@angular/core';

@Component({
  selector: 'app',
  template: '<h1>hello world</h1>',
  styles: []
})
class AppComponent {}

@NgModule({
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

All my @angular/ packages are aligned at version 2.2.4 and I've done my best to update all related webpack and typescript related plugins. There are other packages which may be out of date, but as none of them are imported via my AppModule, I can't see why'd they'd effect the compilers ability to load the AppModule (or at least report a meaningful error).

I've tried both relative and absolute paths for the entryModule.

dwightgunning on 6 Dec 2016

@vascofernandes Instead of "^2.0.10" for typescript, try "2.0.10" exactly. I had it install 2.1.1 for me when I had ^ before.

jessezhang91 on 6 Dec 2016

Hi,
I just tried that and and no success, same error.

vascofernandes on 7 Dec 2016

shit, same here with cli "1.0.0-beta.22-1" :(

alvipeo on 7 Dec 2016

It works for me with
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@angular/[email protected]
@ngtools/[email protected]
[email protected]

avitiw on 8 Dec 2016

Yes, when I downgraded from Typescript 2.1.4 to 2.0.10 it works. I wish I
could tell you why.

Regards,

Dwight

On Thu., 8 Dec. 2016 at 11:52 am, Avinash Tiwari notifications@github.com
wrote:

It works for me with

@angular/[email protected]

@angular/[email protected]

@angular/[email protected]

@angular/[email protected]

@angular/[email protected]

@angular/[email protected]

@angular/[email protected]

@angular/[email protected]

@angular/[email protected]

@ngtools/[email protected]

[email protected]

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/3157#issuecomment-265711755,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAbtmkSTOg-mbj3a4grQ1EkxKMH2PdlBks5rF-FTgaJpZM4KzvfR
.

dwightgunning on 8 Dec 2016

Fixed a lot of issues with path resolution and having your tsconfig in a different path than your webpack config. Closing this as fixed.

hansl on 8 Dec 2016

@hansl I'm experiencing this with an cli-built application that I upgraded from 1.0.0-beta.21 to 1.0.0-beta.22-1.

10% building modules 2/2 modules 0 active(node:39556) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: AppModule is not an NgModule

As far as I know the webpack config should be transparent to cli users, unless I'm missing something.

arciisine on 9 Dec 2016

👍4

For me, fixing the versions in package.json fixed it:

Angular 2.2.3
Router on 3.2.3
Typescript 2.0.10

brugsel on 12 Dec 2016

👍5

I can confirm it breaks with TypeScript 2.1.4 and then works again after downgrading to 2.0.10.

@hansl please reopen this so someone can take a look, or at least point us to another issue where you're tracking this.

colltoaction on 14 Dec 2016

👍5

Fixed a lot of issues with path resolution and having your tsconfig in a different path than your webpack config. Closing this as fixed.

@hansl is this fixed in master?

beeman on 14 Dec 2016

As per @tinchou and @brugsel I am also unable to build unless I keep to the versions below

Angular 2.2.3
Router on 3.2.3
Typescript 2.0.10

MortimerCat on 15 Dec 2016

My external modules only builds when:

Angular: 2.2.3
Router: 3.2.3
Typescript: 2.0.10
Angular-Cli: 1.0.0-beta.15

I've tried several combinations.

npm uninstall angular-cli -g
npm cache clean
npm install [email protected] -g

rgiosa on 22 Dec 2016

@hansl this is a legitimate issue and should be reopened, I also recently upgraded to Angular-Cli:1.0.0-beta.24 and encountered this breaking change, preventing work on a production site. Downgrading to beta.22 and related packages resolved the issue. It's possible that you mean this has been fixed post beta.24, if possible is there a workaround until the fix is released?

misterwise on 25 Dec 2016

👍3

It builds (dev and prod) even though the error is shown. I use latest versions:

angular 2.4.1
typescript 2.1.4
angular-cli 1.0.0-beta.24

anderflash on 25 Dec 2016

👍1

Hello.
I have this error today, after I updated angular to 2.4.1.
Today I saw many errors, and "AppModule is not an NgModule", and "cannot read property codegen" and so on. Then I changed my package.json to previous state (worked state), and now I'm getinng an error "AppModule is not an NgModule". A current package.json is
{
angular: 2.2.3,
router: 3.2.3,
"@ngtools/webpack": "1.1.9",
"typescript": "2.0.10",
"webpack": "2.1.0-beta.25"
}

and this is not working. Changing from 2.2.3 to 2.2.4 not solve this problem.

ichent on 26 Dec 2016

👍2

I had the "AppModule is not an NgModule" error plus various others. I've somehow now got Angular 2.4.1 working with Angular CLI 1.0.0-beta.24 and Typescript 2.0.10 !! :o)

(But not with 2.1.4, that produced the AppModule is not an NgModule". Given this I suspect I need to wait a while for Angular to work with Typescript 2.1.4.)

I followed the steps here for updating Angular-CLI

And here are my dependencies from package.json:

dependencies": {
"@angular/common": "2.4.1",
"@angular/compiler": "2.4.1",
"@angular/core": "2.4.1",
"@angular/forms": "2.4.1",
"@angular/http": "2.4.1",
"@angular/platform-browser": "2.4.1",
"@angular/platform-browser-dynamic": "2.4.1",
"@angular/platform-server": "2.4.1",
"@angular/router": "3.4.1",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/hmr": "~1.2.2",
"@angularclass/hmr-loader": "~3.0.2",
"core-js": "^2.4.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"jasmine-core": "^2.5.2",
"reflect-metadata": "^0.1.9",
"rxjs": "~5.0.2",
"zone.js": "~0.7.4",
"ts-helpers": "^1.1.1"
},
"devDependencies": {
"@angular/compiler-cli": "2.4.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "2.0.10"
}

greenginger on 5 Jan 2017

@hansl I guess you closed this issue just because you assumed it should be somehow fixed, without checking it and asking affected users, right? Please reopen it and please let's find solution for this issue - it's pretty critical thing. Angular CLI is not usable at this moment because of this issue.

e-oz on 5 Jan 2017

👍3

I need(ed?) TypeScript 2.1.x for Generator support. Typescript 2.2.3, 2.1.4, and 2.1.3-insiders.20161130 didn't work (I couldn't find 2.1.3). Dropping to 2.0.10 like suggested fix it.

I should note an older project had "angular-cli": "^1.0.0-beta.19-3", and "typescript": "v2.1.1" and that worked for both ng serve and ng test. Whatever, it works and only took 1 🍺.

JesterXL on 6 Jan 2017

Hello.
Today I removed @ngtools/webpack from my project and now I'm using webpack for AoT. I'm happy.

ichent on 9 Jan 2017

How is that done?

On Tue., 10 Jan. 2017, 00:15 Ivan Kishkevich, notifications@github.com
wrote:

Hello.
Today I removed @ngtools/webpack from my project and now I'm using webpack
for AoT. I'm happy.

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

princemaple on 9 Jan 2017

Angular 2.4.2 just landed which fixed TS 2.1 support. I've successfully built 2.4.2 with typescript 2.1.4 and beta 24 of the cli.

arciisine on 9 Jan 2017

@arciisine Which Angular dependency has to be updated to 2.4.2? common, core?

sbley on 9 Jan 2017

@sbley compiler-cli at least, preferable all.

jkuri on 9 Jan 2017

Yeah, in the end these are peer dependencies. If you update one you gotta update all...

sbley on 9 Jan 2017

@princemaple What do you mean?
Yesterday I founded an example here https://github.com/blacksonic/angular2-aot-webpack (big thanks to the author). But my roadmap is a little bit different
And now, I'm using webpack. Here is a part of my webpack.config.
.....
{
test: /.ts$/,
loaders: env.aot ?
['awesome-typescript-loader?tsconfig=./client-code/src/tsconfig.json', 'angular2-template-loader', 'angular2-router-loader?genDir=./client-code/src/aot-compiled/app&aot=true'] :
['awesome-typescript-loader?tsconfig=./client-code/src/tsconfig.json', 'angular2-template-loader', 'angular2-router-loader']
}
...

With 'angular2-router-loader' I can split my bundles.
Here are my "scripts" from packages.json

"scripts": {
"prepublish": "yarn run build",
"build": "yarn run clean && yarn webpack",
"build:jit": "yarn run clean && yarn webpack -- --env.production",
"build:production": "yarn run clean && yarn run compiler:aot && yarn webpack -- --env.aot --env.production",
"compiler:aot": "ngc -p client-code/src/tsconfig-aot.json",
"clean": "rimraf client-code/dist/* client-code/src/aot-compiled"
},

ichent on 9 Jan 2017

Yeap, this is now working with Typescript 2.1.4!

angular-cli: 1.0.0-beta.24
node: 4.4.7
os: win32 x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2

rgiosa on 9 Jan 2017

👍2

@ichent thanks for the information about the alternative!

princemaple on 10 Jan 2017

@princemaple You are welcome!

ichent on 10 Jan 2017

I can also confirm that this is now working on the latest release versions.....

Angular 2.4.2
Router on 3.4.2
Typescript 2.1.4

MortimerCat on 10 Jan 2017

👍2

Look for unwanted node_modules folders...

I experienced the problem with "AppModule is not an NgModule" after trying to run "./node_modules/.bin/ngc" to build a translated version (the build failed and the app wasn't translated).
I tried to reinstall, change versions etc. but nothing worked.
I finally realized that something had created an extra node_modules folder under the src folder. It only contains "@angular" and "rxjs" folders. When I delete this extra node_modules I can build again.
However I still can't figure out how to use i18n - but that is another problem.

larssin on 14 Jan 2017

👍1

I had one time forgot to add "typings"="index.d.ts" key to my package.json file. Once I did, I stopped getting Please add @NgModule error

AckerApple on 17 May 2017

In case anyone stumbles across this, in my case it was misconfiguration. I was getting a null is not an NgModule error, which was because my entryModule missed of the name of the module:

    new ngtools.AotPlugin({
        tsConfigPath: './tsconfig.json',
        entryModule: root('src/app/pager') 
    })

became

    new ngtools.AotPlugin({
        tsConfigPath: './tsconfig.json',
        entryModule: root('src/app/pager') + '#PagerComponentModule'
    })

Maloric on 22 May 2017

❤1 👍1

ng build and ng serve is not working for me .gives error

ERROR in /home/pratiksha/migration//app/shared/user.service.spec.ts (7,3): Cannot find name 'beforeEach'.

ERROR in /home/pratiksha/migration/app/shared/user.service.spec.ts (13,3): Cannot find name 'it'.

ERROR in /home/pratiksha/migration/app/shared/user.service.spec.ts (14,5): Cannot find name 'expect'.

ERROR in PopoverModule is not an NgModule

ERROR in multi ./src/styles.css ./src/css/main.css ./src/css/font-awesome.min.css ./src/css/daterangepicker.css ./src/css/style.css ./src/css/style-bootstrap.css ./src/css/style-default.css ./src/css/style-material.css
Module not found: Error: Can't resolve '/home/pratiksha/migration/src/css/main.css' in '/home/pratiksha/migration/node_modules/@angular/cli/models/webpack-configs'
@ multi ./src/styles.css ./src/css/main.css ./src/css/font-awesome.min.css ./src/css/daterangepicker.css ./src/css/style.css ./src/css/style-bootstrap.css ./src/css/style-default.css ./src/css/style-material.css

try all but not working for me .
angular cli is not working after upgrade -this is not supporting to .spec.ts file .
why this is happing ?