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?