ng-upgrade upgradeNg1Component does not work well

[david-gang]

The upgrade adapter tries to compile a big function from the directive.

I want to upgrade an icon directive

upgradeAdapter.upgradeNg1Component(getInjectableName(Icon))

export function evalExpression(sourceUrl: string, expr: string, declarations: string,
                               vars: {[key: string]: any}): any {
  var fnBody = `${declarations}\nreturn ${expr}\n//# sourceURL=${sourceUrl}`;
  var fnArgNames = [];
  var fnArgValues = [];
  for (var argName in vars) {
    fnArgNames.push(argName);
    fnArgValues.push(vars[argName]);
  }
  return new Function(...fnArgNames.concat(fnBody))(...fnArgValues);
}

Then if we have an input called icontype i get the following lines:

this.outputSubscriptions[3] = this.directive_2_0.output_[iconType].subscribe({next: (function(event) { return this.handleEvent('[iconType]Change', 2, event); }).bind(this)});
this.outputSubscriptions[4] = this.directive_2_0.output_[(iconType)].subscribe({next: (function(event) { return this.handleEvent('[(iconType)]Change', 2, event); }).bind(this)});

which is not valid javascript and therefore the function fails.

[timkindberg]

What part is not valid javascript? What is that evalExpression function?

[david-gang]

When an object is upgraded with ngupgrade it is "compiled": The evalexpression is from https://github.com/angular/angular/blob/d272f96e23f379e1b565435b3af010138e710ab9/modules/angular2/src/facade/lang.ts#L467

The part which is not valid is the brackets in the object key:

Here is a small example which shows the problem: (In chrome console) a = {} Object {} a.b = 5 5 a.c_[d = 6 VM245:3 Uncaught SyntaxError: Unexpected token }(…)