NoAnnotationError while using ObjectMapper in Angular 2 app

[prabharj]

Hi,

I'm trying to use the json-object-mapper library in my Angular2 app. I have installed it via npm and my component is defined as below:

import { ObjectMapper } from 'json-object-mapper';
import { Item } from './../../models/item.model';
import { Component, OnInit,Inject } from '@angular/core';

@Component({
  selector: 'app-results-content',
  templateUrl: './results-content.component.html',
  styleUrls: ['./results-content.component.css']
})
export class ResultsContentComponent implements OnInit {

  constructor() { }

  ngOnInit() {

   let json =  {
          "Result": null, 
          "ResultId" : 2041, 
          "AnnotationText" : "hould",       
          "Confidence" : "0.4"
        };
   let testInstance: Item = ObjectMapper.deserialize(Item, json);
      }

}

When I try to run the app, I keep getting an error like : "NoAnnotationError" Error: Cannot resolve all parameters for 'Parser'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Parser' is decorated with Injectable.

What can I do to resolve this?

My Item class is as below:

import {JsonProperty} from 'json-object-mapper';

export class Item {

    @JsonProperty('Result')
    result: string;

    @JsonProperty('ResultId')
    resultId: number;

    @JsonProperty('AnnotationText')
    annotationText: string;

     @JsonProperty('Confidence')
    confidence:string;
}

[shakilsiraj]

Hi there,

I don't think it's an issue with this library, it's more to do with Angular and Reflect library loading - https://github.com/angular/angular/issues/13609. I have tested the library in NG versions 2.0.4, 2.2.0 and 2.4.10 - none had any issues at all.

Can u try commenting out the line let testInstance: Item = ObjectMapper.deserialize(Item, json); and see if the problem still exists?

Thanks.

[prabharj]

Yes it works if I comment out that line.

[shakilsiraj]

Can u provide a sample project so I can test it out?

[Maxouhell]

Hi ! Do you have news about this issue ?

It's easy to reproduce, just link (with npm or yarn) an AngularCLI project to a library who use json-object-mapper.

You will have an error like :

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

thanks !

[ghost]

@Maxouhell Hello, I just started using json-object-mapper in an Angular 4 app and I faced the same issue. It took me a while, but I eventually found the solution in this thread: https://github.com/angular/angular/issues/15890

The issue is caused by the reflect-metadata dependency, and the solution is quite simple: just add import 'reflect-metadata'; in your polyfills.ts. And that's it :)

[shakilsiraj]

Thanks @Orhleil. This issue baffled me a lot, could never produce it.

[Maxouhell]

Hi ! Sadly, I already have this import :/

I will check inside Angular issues if I found something

Thanks for your help !

[devpreview]

@prabharj @Maxouhell See pull request #14

[shakilsiraj]

Can you please try 1.5.0?