Uncaught Error: Unexpected value 'DropdownModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

[hpdrago]

Hi, I just started to use this library and now I am getting the following:

vendor.bundle.js:88386 Uncaught Error: Unexpected value 'DropdownModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

The DropdownModule is from PrimeNG but that doesn't have anything to do why I am getting this error. If I remove json-typescript-mapper from my application everything works again.

Thanks for any help!

Here's my tsconfig.json

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

Here's my package.json

{
"name": "my-stock-tickers-ui",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint "src/**/*.ts"",
"test": "ng test",
"pree2e": "webdriver-manager update`",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.4.1",
"@angular/cli": "^1.0.0-beta.28.3",
"@angular/common": "~4.4.1",
"@angular/compiler": "~4.4.1",
"@angular/compiler-cli": "~4.4.1",
"@angular/core": "~4.4.1",
"@angular/forms": "~4.4.1",
"@angular/http": "~4.4.1",
"@angular/platform-browser": "~4.4.1",
"@angular/platform-browser-dynamic": "^4.4.1",
"@angular/platform-server": "~4.4.1",
"@angular/router": "~4.4.1",
"@angular/upgrade": "~4.4.1",
"@types/lodash": "^4.14.57",
"@types/quill": "^1.3.2",
"angular-in-memory-web-api": "~0.3.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"json-typescript-mapper": "^1.1.3",
"ng2-toastr": "^4.0.1",
"primeng": "^4.2.0-rc.1",
"quill": "^1.3.2",
"reflect-metadata": "^0.1.10",
"retyped-http-status-codes-tsd-ambient": "^1.0.5-0",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"tether": "^1.4.0",
"ts-helpers": "^1.1.2",
"tslint": "^5.2.0",
"webpack": "^3.4.1",
"zone.js": "^0.8.10"
},
"devDependencies": {
"@angular/cli": "^1.3.2",
"@types/jasmine": "^2.5.47",
"@types/lodash": "^4.16.4",
"@types/node": "^7.0.16",
"codelyzer": "^3.0.1",
"css-loader": "^0.28.7",
"gulp": "^3.9.1",
"jasmine-core": "^2.6.1",
"jasmine-spec-reporter": "^4.1.0",
"karma": "^1.6.0",
"karma-chrome-launcher": "^2.1.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-remap-istanbul": "^0.6.0",
"protractor": "^5.1.1",
"style-loader": "^0.18.2",
"ts-node": "^3.0.3",
"tslint": "^5.2.0",
"typescript": "2.2.1",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.4.5"
}
}

[jf3096]

try to install another similar decorator and see if you encounter the same error

[hpdrago]

Hi jf3096,
Sure, I would be glad, do you have a suggestion of another decorator?
Thanks,
Mike.

[jf3096]

https://github.com/pleerock/class-validator. good luck!

[sixsixtrample]

@hpdrago did you ever get this resolved? I'm facing the same issue right now.

[hpdrago]

No, I just changed the name of my properties so they matched. I would have loved to use this package but didn't want the hassle of trying to figure out the issue. If you figure it out, let me know.

[sixsixtrample]

So I was able to make it work by making sure the import for the deserializer is after the import for the (injectable/class/etc) and there were no extra lines between imports.

…

On Wed, Nov 8, 2017 at 2:16 PM, Michael Earl ***@***.***> wrote: No, I just changed the name of my properties so they matched. I would have loved to use this package but didn't want the hassle of trying to figure out the issue. If you figure it out, let me know. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#32 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGXn72p7sueVxp0wzuD0b2fDz-jxmOEbks5s0ho-gaJpZM4PaOhA> .

[owennewo]

I saw a similar error when using angular 5. The error message is quite misleading. In my case I had created a custom angular5 module (usng ng cli) that was trying to use json-typescript-mapper. The problem went away when I used json-typescript-mapper not from a custom module (e.g. from app.component.ts). Perhaps I got lucky and essentially accidently did what @sixsixtrample suggested.

[kirtixs]

please see #2 , specifically #2 (comment) this resolves all issues