Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Using Angular.

Steps:

  1. Cloned this simple UI lib that demonstrates the current Angular package standards: https://github.com/jasonaden/simple-ui-lib

  2. Created a new test app with ng new testApp

  3. npm link the simple-ui-lib/dist

  4. npm link simple-ui-lib in the testApp

  5. Imported the example module from simple-ui-lib into testApp:

In the app.module.ts file:

import { BoxModule } from 'simple-ui-lib';

...

@NgModule({
  ...
  imports: [
    ...
    BoxModule
  ]
})

Webpack compiles fine, but I get this error in the browser and nothing loads:

compiler.es5.js:1540 Uncaught Error: Unexpected value 'BoxModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

I've tried:

  • Clearing my npm cache
  • Re-installing all node modules
  • Forcing all Angular modules to be the same version in both projects
  • Checked that all Angular modules are the same version in both projects
  • Checked that the TypeScript version is the same in both projects
  • Using other sample module packages instead of simple-ui-lib
  • Created an entirely new project with the same setup
  • Downgrading the rollup version used in simple-ui-lib to a build from January

If I console log the BoxModule, I can see the value exists and it seems to be registered as an @NgModule, so I'm confused about what this error is trying to tell me.

I've seen this error around in my searches, but it looks like they are almost always caused by a version mismatch between the library and the host application. In my case, the versions are the same.

Versions:

  • TypeScript: 2.2.0
  • @angular/cli: 1.0.4
  • @angular/common: 4.1.3

Any ideas?

Update: Investigating more, looks like this is a problem with @angular/cli itself. Opened a bug here: https://github.com/angular/angular-cli/issues/6429, but if you have any suggestions please let me know.

like image 572
Mike Avatar asked May 23 '17 14:05

Mike


1 Answers

Try to use es6 compiler instead of es5. I encountered similar issue before and chaging the compilation mode solved the problem

I also recommand you To use the last angular cli version and upgrade to angular 5

like image 194
mth khaled Avatar answered Nov 15 '22 14:11

mth khaled