Angular 2 getting error while adding custom decorator with the line “import 'reflect-metadata'”

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting

Current behavior Importing reflect-metadata on a Accessor Decorator cause this error: Unexpected value 'AppComponent' declared by the module 'AppModule'.

Expected behavior

Reproduction of the problem I’ve downloaded the tour-of-heroes project from github and i’ve added this file:

//Validate.ts
import "reflect-metadata";

export function Validate<T>(target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<T>) {
  let set = descriptor.set;
  descriptor.set = function (value: T) {

  }
};

Then i’ve edited the hero-detail.component.ts file like this:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

import { Hero } from './hero';
import { HeroService } from './hero.service';
import { Validate } from './Validate'; // Added

@Component({
  moduleId: module.id,
  selector: 'my-hero-detail',
  templateUrl: 'hero-detail.component.html',
  styleUrls: ['hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;
  @Output() close = new EventEmitter();
  error: any;
  navigated = false; // true if navigated here
  private _test: string; // Addedd

  constructor(
    private heroService: HeroService,
    private route: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.route.params.forEach((params: Params) => {
      if (params['id'] !== undefined) {
        let id = +params['id'];
        this.navigated = true;
        this.heroService.getHero(id)
            .then(hero => this.hero = hero);
      } else {
        this.navigated = false;
        this.hero = new Hero();
      }
    });
  }

  @Validate               // Addedd
  set test(test: string){ // Addedd
    this._test = test;    // Addedd
  }                       // Addedd

  save(): void {
    this.heroService
        .save(this.hero)
        .then(hero => {
          this.hero = hero; // saved hero, w/ id if new
          this.goBack(hero);
        })
        .catch(error => this.error = error); // TODO: Display error message
  }

  goBack(savedHero: Hero = null): void {
    this.close.emit(savedHero);
    if (this.navigated) { window.history.back(); }
  }
}

I’ve also edited the system-config.ts by adding this line:

const map: any = {
  'app' : 'app',

  'main': 'app/main.js',
  '@angular' : 'node_modules/@angular',
  'angular2-in-memory-web-api' : 'node_modules/angular2-in-memory-web-api',
  'rxjs' : 'node_modules/rxjs',
  'reflect-metadata': 'node_modules/reflect-metadata/Reflect.js' // Added
};

What is the motivation / use case for changing the behavior? Use of Accessors Decorators

Please tell us about your environment: Windows 10

• Angular version: 2.0.0
• Browser: all
• Language: Typescript 2.0.2
• Node (for AoT issues): node --version = 4.6.0

[vicb]

Your question sounds like a support request.

Please use the issue tracker only for bugs and feature requests.

Use gitter and StackOverflow for support request.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}