javascript - Unexpected value '...' imported by the module '...'. Please add a @NgModule annotat

Using Angular.Steps:Cloned this simple UI lib that demonstrates the current Angular package standards:

Using Angular.

Steps:

  1. Cloned this simple UI lib that demonstrates the current Angular package standards:

  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 piles fine, but I get this error in the browser and nothing loads:

piler.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/mon: 4.1.3

Any ideas?

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

Using Angular.

Steps:

  1. Cloned this simple UI lib that demonstrates the current Angular package standards: https://github./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 piles fine, but I get this error in the browser and nothing loads:

piler.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/mon: 4.1.3

Any ideas?

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

Share Improve this question edited May 23, 2017 at 16:06 Mike asked May 23, 2017 at 14:55 MikeMike 4,09124 silver badges36 bronze badges 2
  • 1 This may help: github./angular/angular-cli/blob/master/docs/documentation/… – Ryan Commented Jul 17, 2017 at 13:21
  • i'm having the same issue with a ChartsModule from ng2-charts.. it's only an issue on aot though. – JBoothUA Commented Dec 8, 2017 at 15:37
Add a ment  | 

1 Answer 1

Reset to default 2

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

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745176871a4615232.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信