TypeScript's builtin helpers (for decorators etc.) fail Closure compilation

[stringham]

When we compile a hello world Angular 2 app app.component.ts with Tsickle it generates invalid es6 closure.

Input:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>Hello World</h1>'
})
export class AppComponent { }

Output:

goog.module('js.app.ts.app.component');var module = module || {id: 'js/app/ts/app.component.js'};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = goog.require('@angular.core');
let AppComponent = class AppComponent {
};
AppComponent = __decorate([
    core_1.Component({
        selector: 'my-app',
        template: '<h1>Hello World</h1>'
    }), 
    __metadata('design:paramtypes', [])
], AppComponent);
exports.AppComponent = AppComponent;

When we try to compile this with closure we get the error:

The body of a goog.module cannot reference this.

if we remove (this && this.__decorate) || and (this && this.__metadata) || closure no longer complains about this.

[evmar]

To make this work we pass --noEmitHelpers (see https://www.typescriptlang.org/docs/handbook/compiler-options.html ), then forked the TypeScript helpers definitions (the __metadata etc. comes from the compiler) into a format that Closure accepts. I'm actually just today still fiddling with this to avoid warnings.

This upstream bug is relevant:
microsoft/TypeScript#3364
once it's landed we can have tsickle provide a real module implementation of these helpers.

For now, you might try passign --noEmitHelpers and see what breaks -- these helpers are just for decorator stuff that your code may not even use.

[tyler-gh]

@martine are you planning on merging a fix for this into tsickle or should we plan on contributing a fix?

[evmar]

I will take a look now. Sorry for dropping this!

[evmar]

To restate, the fix is to use --noEmitHelpers and then to provide your own, Closure-compatible implementations of those helpers. Within Google we just derived them from the code by making modifications like what you said (removing the use of "this").

I can publish our version, but I think the first thing to do will be to figure out the licensing for publishing this modified code. Sorry to go immediately into boring territory.

[evmar]

Oops, I cited the wrong bug in the change, but I fixed this in c9546fe . Let me know if that doesn't work.