ERROR in ** is not an NgModule,

[Pilukina]

OS?

Windows 7

Versions.

@angular/cli: 1.0.0-beta.29
node: 6.9.2
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/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/cli: 1.0.0-beta.29
@angular/compiler-cli: 2.4.2

Repro steps.

The application was created using the CLI, the xpa-common library no.

I install my simple library: https://www.npmjs.com/package/xplain-common that contains a SampleModule, HelloModule and AutoCompleteModule.

On development environment,
Just after ng serve the terminal shows the message:

The log given by the failure.

"ERROR in SampleModule is not an NgModule" (is the first module from xplain-common imported on demo.module.)

If I modify any file (with some space, so no a real change in the code) webpack re-compile the app and the "is not an NgModule" error disappears. On local I can see SampleModule, HelloModule and the AutoCompleteModule included on my application.

Once I want to go to production (ng build --prod) with this "running" code, the terminal throws the follow message:

The log given by the failure.

ERROR in Unexpected value 'SampleModule in C:/workspace/gallery/node_modules/xplain-common/dist/src/sample/sample.module.d.ts' imported by the module 'DemoModule in C:/workspace/gallery/src/app/
demo/demo.module.ts'

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\workspace\gallery\src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

My package.json dependencies are:

"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/material": "^2.0.0-beta.0",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"@types/google-maps": "3.1.28",
"angular-sample-module": "^0.1.2",
"angular2-highcharts": "^0.3.3",
"atob": "^2.0.3",
"autopulous-xdom": "^1.0.4",
"bootstrap": "^3.3.7",
"btoa": "^1.1.2",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"highcharts": "^5.0.0",
"jszip": "^3.1.3",
"ng2-bootstrap": "^1.1.16-9",
"primeng": "^1.0.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"xml2js": "0.4.17",
"xml2js-es6-promise": "1.1.1",
"xplain-common": "0.0.2",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/cli": "1.0.0-beta.29",
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"@types/hammerjs": "^2.0.33",
"@types/jszip": "0.0.31",
"@types/pako": "^0.2.31",
"@types/xml2js": "0.0.32",
"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.3.0",
"typescript": "~2.0.3"
}

Mention any other details that might be useful.

This issue comes from the previous: #4347

---

Thanks! We'll be in touch soon.

[beeman]

Hi @Pilukina , see this issue for the problem and solutions at the bottom

[Pilukina]

Hi @beeman . This bug that I'm reporting now it is related with #4347 (maybe I should reopen it as including the new modules It is not working fine)
I'm facing the "is not an NgModule" error also when using your great sample: angular-sample-module
Could you help me to find the solution, please?

[maxailloud]

I have the same error, not on the same module but exactly the same error.

And in the same way if I make a change in a file in serve mode, even with a space or a blank line, it will work as expected.Pretty weird behaviour actually.

[maxailloud]

By the way here are the versions I'm using:

@angular/cli: 1.0.0-beta.30
node: 7.2.1
os: darwin x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.6

[beeman]

@Pilukina it has to do with the metadata that is provided with the module that makes it incompatible with recents builds. This is an issue with Angular, not with Angular CLI.

Read my comment here about information on how to create a compatible module: #4247 (comment)

If it's a third-party module check if there is an updated version. If not, create an issue there to make the project compatible with recent versions of Angular.

Sadly there is not shortcut here.

[Cody-Nicholson]

@Pilukina @maxailloud I figured out what is happening here. I had the same issue with the "NgModule" error on the initial ng serve. In order to fix this, I had to add ngc compilation to the build process of my external angular library.

@beeman It might be worth documenting this somewhere in the CLI notes, as I had no clear indication that AOT was required from 3rd party modules.

Background: I had been using a modified version of the angular material2 build for a component library but was not running the ngc step in the build. Check out components.ts. Running the gulp task: build:components:release isn't enough, I have to run :build:components:ngc

It took me 3+ days to figure this out and was very frustrating.

[Pilukina]

Compiling with ngc It works fine. Thank you so much.

Just I would like to add some urls with useful info:
http://www.usefuldev.com/blog/post/using-ngc-to-build-an-angular-2-library-project

And, of course,
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Cheers!

[select]

If somebody has a similar issue: we were able to resolve it by changing default exports to named exports.

[maximelafarie]

@select can you give an example ?

[select]

@maximelafarie it's somewhere buried but what we ended up doing is changing all exports so there are only imports that look like

import { ModalComponent } from '../../modals/modal.component';

so there is not import like the following

import ModalComponent from '../../modals/modal.component';