Angular-cli: ERROR in [module] is not an NgModule

[n0daft]

Bug Report

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.0-rc.5
node: 7.9.0
os: darwin x64
@angular/animations: 4.3.4
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/platform-server: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.3.0-rc.5
@angular/compiler-cli: 4.3.4

Repro steps.

$ ng new sample
$ cd sample
$ npm i @angular/cdk --save-dev 
$ npm i @angular/animations @angular/flex-layout @angular/material @ngx-translate/core @elderbyte/ngx-simple-webstorage @elderbyte/ngx-jwt-auth @elderbyte/ngx-starter --save

Replace code in app.module.ts with the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {ExpandToggleButtonModule} from '@elderbyte/ngx-starter';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ExpandToggleButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

$ npm run build

The log given by the failure.

ERROR in ExpandToggleButtonModule is not an NgModule

Note It does not matter which module is used. It just fails at the first encountered module.

ng build --prod results in a bit more detailed error:

ERROR in Unexpected value 'ExpandToggleButtonModule in /Test/sample/node_modules/@elderbyte/ngx-starter/ngx-starter.d.ts' imported by the module 'AppModule in /Test/sample/src/app/app.module.ts'. Please add a @NgModule annotation.

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

Desired functionality.

The build should succeed. There shouldn't be any module annotations missing.

Mention any other details that might be useful.

We aren't sure if the error lies within our component libraries or within the using application. The libraries were all created with the angular2-library generator. The libraries can be found at:

• https://github.com/ElderByte-/ngx-simple-webstorage
• https://github.com/ElderByte-/ngx-jwt-auth
• https://github.com/ElderByte-/ngx-starter

It might be useful to check the compiled files of the libraries to make sure the files are in the expected format.

The following issues might be related, but no solution helped:

• https://github.com/angular/angular-cli/issues/3426

What we tried so far:

• Using different combinations of versions of angular-cli, typescript
• Make use of "skipMetadataEmit": false in angularCompilerOptions of the tsconfig in the libraries

[IsNull]

I've yet to fully grasp the expected package format of a compiled angular library, but looking at the root metadata.json of other projects (i.e. Angular Material 2), it looks like its where the decorator information ends up. And this seems missing in the libraries where the imports cause issues.

[jvandemo]

@n0daft — Can you please try:

$ ng serve --preserve-symlinks

and see if that helps? See https://github.com/jvandemo/generator-angular2-library/issues/170#issuecomment-322326763.

[n0daft]

@jvandemo: thanks for helping. I updated @angular/cli to 1.3.0 in order to use the --preserve-symlinks option. However the error still occurs. I also tried with @angular/[email protected] Moreover, there are additional errors. Full error:

ERROR in ExpandToggleButtonModule is not an NgModule
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/Test/sample/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/Test/sample/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/Test/sample/node_modules/@ngtools/webpack/src/loader.js:380:33)
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/Test/sample/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/Test/sample/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/Test/sample/node_modules/@ngtools/webpack/src/loader.js:380:33)
 @ multi ./src/polyfills.ts

You think it has something todo with symlinks? I've read that in v5 npm makes use of symlinks instead of making copies into the node_modules folder of the consuming project. But as far as I can tell I'm still using npm v4.2.0.

[n0daft]

It seems that only modules of the ngx-starter library result in the error. The other two are fine.
Interesting are the differences of the metadata.json files from the libraries. While the metadata files of the working libraries are extensive, the metadata.json of the ngx-starter is suspiciously small, lacking the whole metadata part:

Content of

{"__symbolic":"module","version":3,"exports":[{"from":"./features"}],"metadata":{},"origins":{},"importAs":"@elderbyte/ngx-starter"}

Already the part {"from":"./features"} seems wrong or at least incomplete.

[n0daft]

I just found the cause for the suspicious looking ngx-starter.metadata.json. Its because of our project structure. Our structure looks like this:

|src
|-components
|--index.ts
|--expand-toggle-button
|---index.ts
|---expand-toggle-button.component.ts
|-features
|-index.ts
|-jest.ts
|-package.json
|-tsconfig.es5.json

The index.ts files contain the needed exports from their level respectively.

However, everything that is not inside the root level is lacking in the metadata.json file. How can a multi-folder structure be achieved so that the build results in a correct flattened metadata file?

[n0daft]

I was able to fix the issue. It really was the incomplete metadata.json file which caused the error.
The cause for the incomplete metadata.json was that the index files were not implied in the barrel files like they used to.

We had to change our barrel files accordingly:

Change

export * from './directives'

to

export * from './directives/index'

There were some discussions regarding angular2 and barrels (https://github.com/angular/angular.io/issues/1301). However, I'm not sure which conclusions I should draw from them. In any case, this issue is resolved.

[jvandemo]

@n0daft — Thank you for the update. Did you still need

$ ng serve --preserve-symlinks

to avoid the error?

[IsNull]

@jvandemo We got the error when we where consuming the library in a different project from the official npm repo. Symlink issues are AFAIK only relevant if you try to consume the library right next to the it for a demo/test cause.

[n0daft]

@jvandemo No I didn't. Like @IsNull, I think ng serve --preserve-symlinks is a solution to the problem which might arise if you use symlinks to use a library locally. In our case we always uploaded it to npm. So our root cause really was different => The fact that the exports in our barrel files were silently ignored.

[jvandemo]

@n0daft — Thank you for the update.

@IsNull — If you need help, please create a new issue with the error you are faced with, so it can be investigated separately. Thanks!

[DashKalikalyan]

Hi @n0daft.. Can you plz help me solve the issue?
I am having the same issue

ERROR in Error: RecipeModule is not an NgModule at _getNgModuleMetadata (/Users/kalikalyandash/projectShoppingList/node_modules/@angular/compiler-cli/src/ngtools_impl.js:140:15) at _extractLazyRoutesFromStaticModule (/Users/kalikalyandash/projectShoppingList/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26) at /Users/kalikalyandash/projectShoppingList/node_modules/@angular/compiler-cli/src/ngtools_impl.js:129:27 at Array.reduce (native) at _extractLazyRoutesFromStaticModule (/Users/kalikalyandash/projectShoppingList/node_modules/@angular/compiler-cli/src/ngtools_impl.js:128:10) at Object.listLazyRoutesOfModule (/Users/kalikalyandash/projectShoppingList/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/kalikalyandash/projectShoppingList/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (/Users/kalikalyandash/projectShoppingList/node_modules/@ngtools/webpack/src/plugin.js:207:44) at _donePromise.Promise.resolve.then.then.then.then.then (/Users/kalikalyandash/projectShoppingList/node_modules/@ngtools/webpack/src/plugin.js:443:24) at process._tickCallback (internal/process/next_tick.js:109:7)
Which index file do I need to do the change in?

[n0daft]

@DashKalikalyan There can be multiple causes for this issue. In our case it were falsely linked export statements in the index (barrel) files. Unfortunately there were no compile time exceptions which could help.

Does RecipeModule belong to another project/library or are you having the problem within the same project?

In case of a library, check the metadata.json file from the library. If the metadata part looks like this "metadata":{} you definitely experiencing the same issue as described above.

[rajguru827]

ERROR in Error: Duplicated path in loadChildren detected: "./employer/employer.module#EmployerModule" is used in 2 loadChildren, but they point to different modules "(E:/Projects/angualr/recruithire/recruithire/src/app/pages/employer/employer.module.ts and "E:/Projects/angualr/recruithire/recruithire/src/app/client/employer/employer.module.ts"). Webpack cannot distinguish on context and would fail to load the proper
one.

Removing any one works fine but here I want to follow the same structure.
For Example: URL : /employer it is from pagesModule->EmployerModule
URL: /client/employer it is from clientModule->EmployerModule

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