“Please add a @NgModule annotation” Error on Angular2

Question

I have made a custom angular2(5.0.x) module that looks like this :

import { GuageService } from './services/guage.service';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GuageComponent } from './guage/guage.component';

@NgModule({
  declarations: [GuageComponent],

  imports: [
    CommonModule
  ],

  providers : [GuageService],
  exports : [GuageComponent]
})
export class GuageModule {}

I use it in my app modules like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DxButtonModule, DxCircularGaugeModule } from 'devextreme-angular';
import { GuageModule } from '@kronsbi/bi-module-template';
import { HttpClientModule } from '@angular/common/http';


    import { AppComponent } from './app.component';

        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            DxButtonModule,
            DxCircularGaugeModule,
            HttpClientModule,
            GuageModule
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

When I try to start my app I get the following error.

Unexpected value 'GuageModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

UPDATE

tsconfig for the main app:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

ts config for the GuageModule package: {

 "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "@angular/core": ["node_modules/@angular/core"],
      "rxjs/*": ["node_modules/rxjs/*"]
    },
    "rootDir": ".",
    "outDir": "dist",
    "sourceMap": true,
    "inlineSources": true,
    "target": "es5",
    "skipLibCheck": true,
    "lib": [
      "es2017", 
      "dom"
    ]
  },
  "files": [
    "index.ts"
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true
  }
}

Answer 1

If you are using Angular 5.0 you need to add "annotationsAs": "decorators" to the "angularCompilerOptions" for your package. Angular 5 introduced new optimizations and by default the decorators are removed on compile because they are not needed at runtime. This does not work for packages as you already discovered. You can read about this in the Angular 5 announcement blog the "Build Optimizer" paragraph mentions this. Version 5.0.0 of Angular Now Available

I use this settings in my angular packages:

"angularCompilerOptions": {
      "skipTemplateCodegen": true,
      "skipMetadataEmit": false,
      "strictMetadataEmit": true,
      "annotationsAs": "decorators"
   }

Answer 2

I had the same problem. With angular 5+ and angular cli 1.5 it says that your code is not compatible and also your library is scoped package. I have managed to fix it with adding

 export * from './your-path'

In all my files (exporting everything from my library).

As i understood its you import as 3 party library You can try to run the application with

 ng serve --preserve-symlinks

also add flatModuleId in src/tsconfig.es5.json accordingly:

"flatModuleId": "@scope/library-name"

Link to github here

There is issue on github for more information

Answer 3

This is most likely an issue with the way your npm package is being created. In your package.json for your GuageModule are you defining a main? This should point to the entry point to your npm package. Here is an example of mine.

"main": "./dist/module.js",

Then if you want typings from GuageModule in your main app you'll need to go to your tsconfig.json and under compilerOptions set declaration to be true to generate the typings files.

"compilerOptions": {
  ...
  "declaration": true
  ...
},

Then finally in your package.json you will need to point to the entry point for your typings file.

"types": "./src/app/layout.module.d.ts"

Now you should be able to import your module and have typings on the module that you imported. Hope this helps!

Answer 4

请在您的仪表模块的tsconfig.json的compilerOptions中添加“emitDecoratorMetadata”：true