How to prepare release version with SystemJS and Gulp?
You will get " Unexpected anonymous System.register call" because the references are not being loaded in the correct order. I use JSPM to properly build my angular app for production. There are 4 parts to the process.
Part 1: Compile your typescript files
var ts = require("gulp-typescript");var tsProject = ts.createProject("./App/tsconfig.json");gulp.task("compile:ts", function () { var tsResult = tsProject.src() .pipe(ts(tsProject)); tsResult.js.pipe(gulp.dest("./wwwroot/app"));});Part 2: Configure config.js (to tell JSPM how to bundle your app):
System.config({ baseURL: "/", defaultJSExtensions: true, paths: { "npm:*": "jspm_packages/npm/*", "github:*": "jspm_packages/github/*", "node_modules*": "node_modules/*" }, map: { 'app': 'app', 'rxjs': 'node_modules/rxjs', '@angular': 'node_modules/@angular' }, packages: { 'app': { main: 'bootDesktop.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, '@angular/common': { main: 'index.js', defaultExtension: 'js' }, '@angular/compiler': { main: 'index.js', defaultExtension: 'js' }, '@angular/core': { main: 'index.js', defaultExtension: 'js' }, '@angular/http': { main: 'index.js', defaultExtension: 'js' }, '@angular/platform-browser': { main: 'index.js', defaultExtension: 'js' }, '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' }, '@angular/router': { main: 'index.js', defaultExtension: 'js' }, '@angular/router-deprecated': { main: 'index.js', defaultExtension: 'js' }, '@angular/testing': { main: 'index.js', defaultExtension: 'js' }, '@angular/upgrade': { main: 'index.js', defaultExtension: 'js' } }});Part 3: Use gulp-jspm-build to bundle up your app (I was previously using gulp-jspm but it was causing errors, so I switched to gulp-jspm-build):
var jspm = require('gulp-jspm-build');gulp.task("jspm_bundle", function () {return jspm({ bundleOptions: { minify: true, mangle: false }, bundleSfx: true, bundles: [ { src: './wwwroot/app/appBoot.js', dst: 'boot.bundle.min.js' } ]}).pipe(gulp.dest('./wwwroot/js-temp'));});//this will create a file called boot.bundle.min.js//note I have set jspm to create a self-executing bundle//I put mangle to false because mangling was causing errors 4: Now concat all your already minified assets:
gulp.task("min:js", ["jspm_bundle"], function () { //this only concats boot.bundle.min.js //and dependencies.min.js which has already been minified such as es6-shim.js var files = [ "./wwwroot/js-temp/dependencies.min.js", "./wwwroot/js-temp/boot.bundle.min.js" ]; return gulp.src(files) .pipe(concat("boot.bundle.min.js")) .pipe(gulp.dest("./wwwroot/js"));});Finally, put one nice tidy script reference into your index.html:
<script src="~/js/boot.bundle.min.js"> </script>UPDATE: Revised config.js to conform to a Angular 2.0-rc.0 appp
UPDATE 2: tsconfig.json looks like this:
{ "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, "module": "commonjs", "moduleResolution": "node", "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "sourceMap": true, "declaration": false, "noLib": false, "target": "es5", "outDir": "wwwroot/app/" }, "exclude": [ "node_modules", "wwwroot" ]}
You can use SystemJS Builder
as easy as this
var path = require("path");var Builder = require('systemjs-builder');// optional constructor options// sets the baseURL and loads the configuration filevar builder = new Builder('path/to/baseURL', 'path/to/system/config-file.js');builder.bundle('local/module.js', 'outfile.js').then(function() { console.log('Build complete');}).catch(function(err) { console.log('Build error'); console.log(err);});you can look at the full setup in my starter project
I think we found the root cause of this. Honestly, I have been there before so the way I trace this type of issue are
- Check if angular & systemjs are loaded beforehand.
- Check if they are really loaded. no 404 surprise. (It sounds stupid but shit happens)
- If you bundle libraries as vender.js make sure they are bundle in correct sequence. Check the output file and see if they are concat as the way you expect.