Does this conflict with Angular 2?

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!

[djsiroky]

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

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

[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.