I have a Angular 2typescript project that I would like to link into a single JS file. Loader:
main.ts
import {platformBrowser} from '@angular/platform-browser';
import {AppModuleNgFactory} from '../aot/dev/app/app.module.ngfactory'
import {enableProdMode} from '@angular/core';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(e=>console.error(e));
I used the Angular 2Ahead of the Time compiler to generate files ngfactory.ts. Then I ran tsickleto convert my files to the JS Google Closure Compiler. This is 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;
import { AppModuleNgFactory } from '../aot/dev/app/app.module.ngfactory';
var AppModuleNgFactory = AppModuleNgFactory;
import { enableProdMode } from '@angular/core';
var enableProdMode = enableProdMode;
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(function (e) { return console.error(e); });
Finally, I use google-closure-compiler-jsgulp to create a task that binds all JS into a single 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 does not work immediately with many errors. Here is an example:
dev \ main.js: 3 (JSC_REFERENCE_BEFORE_DECLARE) Variable specified before the declaration: module $ contents $ C_ $ websites $ learn $ angular2 $ dev $ main_platformBrowser
dev\main.js: 5 (JSC_REFERENCE_BEFORE_DECLARE) , : $contents $C_ $websites $learn $ angular2 $dev $main_AppModuleNgFactory
dev\main.js: 7 (JSC_REFERENCE_BEFORE_DECLARE) , : $contents $C_ $websites $learn $ angular2 $dev $main_enableProdMode
dev\main.js: 10 (JSC_POSSIBLE_INEXISTENT_PROPERTY) bootstrapModuleFactory ?
dev\main.js: 3 (JSC_INTERNAL_ERROR_UNEXPECTED_TOKEN) : TypeCheck , IMPORT
dev\main.js: 3 (JSC_INTERNAL_ERROR_UNEXPECTED_TOKEN) : TypeCheck , IMPORT_SPECS...
tsickle , GitHub 10 2016 , "google-closure-compiler-js": "^20160916.0.0".
?