ERROR in [module] is not an NgModule

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

[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?