Angular 2 transpiled with tsickle can't be processed by google-closure-compiler

1.1k views Asked by At

I have an Angular 2 typescript project that I would like to bundle into one JS file. Bootstrapper:

main.ts

import {platformBrowser} from '@angular/platform-browser';
import {AppModuleNgFactory} from '../aot/dev/app/app.module.ngfactory' //generated code
import {enableProdMode} from '@angular/core';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(e=>console.error(e));

I used Angular 2's Ahead-of-Time compiler to generate ngfactory.ts files. I then ran tsickle to transform my files into Google Closure Compiler compatible JS. This completed without difficulty:

"node_modules/.bin/tsickle" -- -p ./

Here is the result:

main.js

goog.module('C_.websites.learn.angular2.dev.main');var module = module || {id: 'C:/websites/learn/angular2/dev/main.js'};
import { platformBrowser } from '@angular/platform-browser';
var platformBrowser = platformBrowser; /* local alias for Closure JSDoc */
import { AppModuleNgFactory } from '../aot/dev/app/app.module.ngfactory';
var AppModuleNgFactory = AppModuleNgFactory; /* local alias for Closure JSDoc */ //generated code
import { enableProdMode } from '@angular/core';
var enableProdMode = enableProdMode; /* local alias for Closure JSDoc */
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(function (e) { return console.error(e); });

Finally, I use google-closure-compiler-js to create a gulp task that bundles all JS into one file.

gulpfile.js

const closureCompiler = require('google-closure-compiler-js').gulp();
gulp.task('closure-compiler', function() {
    return gulp.src('./dev/main.js')
        .pipe(closureCompiler({
            compilationLevel: 'SIMPLE',
            warningLevel: 'VERBOSE',
            outputWrapper: '(function(){\n%output%\n}).call(this)',
            jsOutputFile: 'build.js',
            createSourceMap: false
        }))
        .pipe(gulp.dest(appProd));
});

The task fails immediately with many errors. Here is a sample:

dev\main.js:3 (JSC_REFERENCE_BEFORE_DECLARE) Variable referenced before declaration: module$contents$C_$websites$learn$angular2$dev$main_platformBrowser

dev\main.js:5 (JSC_REFERENCE_BEFORE_DECLARE) Variable referenced before declaration: module$contents$C_$websites$learn$angular2$dev$main_AppModuleNgFactory

dev\main.js:7 (JSC_REFERENCE_BEFORE_DECLARE) Variable referenced before declaration: module$contents$C_$websites$learn$angular2$dev$main_enableProdMode

dev\main.js:10 (JSC_POSSIBLE_INEXISTENT_PROPERTY) Property bootstrapModuleFactory never defined on ?

dev\main.js:3 (JSC_INTERNAL_ERROR_UNEXPECTED_TOKEN) Internal Error: TypeCheck doesn''t know how to hanle IMPORT

dev\main.js:3 (JSC_INTERNAL_ERROR_UNEXPECTED_TOKEN) Internal Error: TypeCheck doesn''t know how to handle IMPORT_SPECS ...

I'm using the latest tsickle source cloned from GitHub as of Oct 10, 2016, along with "google-closure-compiler-js": "^20160916.0.0".

Am I missing a step?

0

There are 0 answers