Does this conflict with Angular 2?

[meddario]

Hi,
i'm trying to use this in an Angular 2 project, but it seems that everything stops working as soon as i create an annotated object. I'm not a great Angular 2 expert so maybe it's my fault.

I try to provide an example, starting from the Angular 2 "Quickstart", available here https://github.com/angular/quickstart.git.

I followed these steps:

• Installed json-typescript-mapper: npm install json-typescript-mapper --save
• Edited systemjs.config.js, in this way:

 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs': 'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

      // Edited for: json-typescript-mapper
      'json-typescript-mapper': 'npm:json-typescript-mapper',
      'reflect-metadata': 'npm:reflect-metadata',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      // Edited for json-typescript-mapper
      'json-typescript-mapper': {
        main: './index.js',
        defaultExtension: 'js'
      },
      'reflect-metadata': {
        main: './Reflect.js',
        defaultExtension: 'js'
      }

    }
  })
  ;
})(this);

• Create typescript class MyClass, in this way:

import {JsonProperty} from "json-typescript-mapper";

export class MyClass {
  @JsonProperty('my-prop')
  public prop: string;
}

• Created a MyClass Object in app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import {MyClass} from "./my-class";

// this causes: (index):18 Error: Error: Unexpected value 'AppComponent' declared by the module 'AppModule'(…)
var data = new MyClass();

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

• Started the project with npm start
• As said in the comment, this gives the error: (index):18 Error: Error: Unexpected value 'AppComponent' declared by the module 'AppModule'(…) in the browser.

Is there something i can do to use this package in an Angular 2 project?

Thanks in advance!

[jf3096]

There is no conflict at all. It just that you might need to make sure the json-typescript-mapper has imported and configured correctly so that the systemjs can find it. Check your console to see if any 404 resources.

I also updated to the library to make it compatible if you have "noImplicitAny" in your tsconfig.js file.

[meddario]

Hi,
thank you very much for the answer, however the project still doesn't work. I tried this:

• deleted json-typescript-mapper from package.json
• deleted folder node_modules
• ran npm install and npm install json-typescript-mapper --save to get the latest versions

Now when i execute npm start i get this:

> tsc && concurrently "tsc -w" "lite-server"

node_modules/json-typescript-mapper/index.ts(43,9): error TS7005: Variable 'decoratorMetaData' implicitly has an 'any' type.
node_modules/json-typescript-mapper/index.ts(108,22): error TS7006: Parameter 'item' implicitly has an 'any' type.

If i change "noImplicitAny": true, to false in tsconfig.json, the project compiles but I get the same error (index):18 Error: Error: Unexpected value 'AppComponent' declared by the module 'AppModule'(…) in the browser.

The trace in the browser is this :

(anonymous function)    @   (index):18
ZoneDelegate.invoke @   zone.js:203
Zone.run    @   zone.js:96
(anonymous function)    @   zone.js:462
ZoneDelegate.invokeTask @   zone.js:236
Zone.runTask    @   zone.js:136
drainMicroTaskQueue @   zone.js:368
ZoneTask.invoke @   zone.js:308

There aren't 404 errors, SystemJS seems to be configured correctly, however, the same happens also with other projects, even if they are created with the angular cli, which uses Webpack instead of SystemJS.

[jf3096]

I will try out ng2 recently and c if it will work or not. thank you for your feedback.

Regards~

[meddario]

Thank you! Let me know if you need any info!

[fernandoj92]

Hello, I am having similar issues. When a class with one or more @JsonProperty is instantiated or the method deserialize is called, the following error is thrown:

GET file:///home/.../.../node_modules/json-typescript-mapper net::ERR_FILE_NOT_FOUND (zone.js:1274 )

Which is weird because system js is correctly configured or at least wasn't throwing errors before those conditions.

Thank you

[jf3096]

Hi @meddario ,
I have npm the angular cli and created a webpack ng2 project. Tested and run json-typescript-mapper. It works fine in other file (this so far could consider as a compromise solution) except in src/app/app.module.ts.

Indeed, if json-typescript-mapper is placed in src/app/app.module.ts, error throw "Unexpected value 'AppComponent' declared by the module 'AppModule'". I have checked out ng2 source code but still no idea.

I found out a post which has similar problem, http://stackoverflow.com/questions/39580740/angular-2-0-0-metadata-resolver-weird-behavior. This means as long as we use any custom decorator, ng2 will complain. So this is not a bug of json-typescript-mapper.

Anyway, it's funny to get into ng2. I will get into it and hopefully could found out a better solution to compatible with ng2 perfectly.

[jf3096]

Hi @fernandoj92,
as for systemjs, please make sure your configuration file is correct. Since the configuration file of ng2 is directly points to xxx.umd.js. file:///home/.../.../node_modules/json-typescript-mapper is currently pointing at the folder not the source code file. So maybe you can checkout how to import third party library in systemjs.

Give it a try. If you still cannot fix it, I will try it out for you during this weekend.

Regards~

[pmig]

@jf3096 I saw your example, but you simply put your code inside the angular component files. Just try out the deserialization inside an angular component / or injectable service.

And you will see that the code breaks. This is sadly not a functional workaround.

Although your project seems very promising. Keep on the work (:!

I created a bug ticket in the angular project - let's track down the problem!

[Serginho]

I'm the author of the post "angular-2-0-0-metadata-resolver-weird-behavior". I don't think it's an angular problem.
With the first scaffold I pointed out in the stackoverflow post, the library works properly. Then I can conclude it's not an angular problem.

I think it's an angular-cli problem. I haven't found the issue yet, last try was in angular-cli beta 15, and same errors are thrown.

[djsiroky]

I was able to resolve this issue with angular-cli by addingimport 'reflect-metadata'; to ./src/polyfills.ts.

This person in angular/angular#12010 resolved it by adding that line to every component with a custom decorator, but this did the same thing for my cli project.

[jf3096]

@djsiroky
Good to know. Thanks for your reply. For my own project i will add import 'reflect-metadata'; and add something like 'no emit helper' in tsconfig.json so that my project will not regenerate duplicate function like __extends, assign, reflect.

According to my experience, I believe ng2 by default exclude support for es7 decorate. If any developers want to use that, ng2 let them add import 'reflect-metadata' manually.

[jongunter]

Adding import 'reflect-metadata'; to polyfills.ts in an Angular CLI project solved my problem. I think this should possibly be added to the README instructions as it seems to be a widespread problem.