Trying to compile angular5 project with tsickle/closure, I get "The body of a goog.module cannot reference this."

Question

I am trying to compile a relative complex angular5 project with google closure.

First I use tsickle to compile the code into a google closure-friendly syntax, and then I try to use the google closure to create the final bundle.

Unfortunately, tsickle seems to create a module format which is incompatible with the google closure, I get the following error for all the modules I have:

./path/to/my.component.js:8: ERROR - The body of a goog.module cannot reference this.
var __metadata = (this && this.__metadata) || function (k, v) {

However, considering that the intention of the recent ngc -> tsickle switch with angular5 to help the closure builds, I think somehow it should work.

Checking a little bit my path/to/component.js, I found this in the start:

goog.module('target.path.to.MyComponent');var module = module || {id: 'target/path/to/MyComponent.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;
};

It seems, the typescript compiler (which is called internally by tsickle) puts this code before all the modules, it does it without the knowledge of the tsickle, and it makes the module format incompatible with the google closure!

What to do? How to work around it?

Answer 1

After some hours of googling, including some digging in the tsc source code, I found the solution.

Typescript creates this header essentially as a workaround for the lack of some reflection support. It includes this thingy into all the .js-files, which remains unused, only increases the size of the final bundle.

In the "old" ngc era (angular 2.x - 4), this code fragment didn't cause problems. But it is incompatible with the google closure, because its module format doesn't allow to use this from modules directly.

TypeScript has the option to turn off this feature with the

--noEmitHelpers=true

flag. As tsickle isn't very strong in parameter processing, best to insert a

"noEmitHelpers": true,

into your tsconfig.json.