Search

Bundle Angular2 App into package using systemjs

| 0 Comments
angular2



Assuming you already have an Angular2 app which uses systemjs for loading modules.

for starting from scratch, you can clone this repo for minimal setup of Angular2 App.

package.json


"devDependencies": {
	"grunt": "1.0.1",
	"grunt-systemjs-builder": "0.2.7"
}


build.config.js

System.config({
    meta:{
        '@angular/*':{
            build: false
        },
        'rxjs/*': {
            build: false
        }
    },
    paths:{
        "dist/*": "./dist/*.js"
    }
});


Gruntfile.js

module.exports = function (grunt) {
	grunt.initConfig({
		systemjs: {
			dist: {
				options: {
					sfx: true,
					baseURL: "./",
					configFile: "./build.config.js",
					minify: true,
					sourceMaps: false
				},
				files: [{
					"src": "./dist/main.js",
					"dest": "./build/main.js"
				}]
			},
			dev: {
				options: {
					sfx: true,
					baseURL: "./",
					configFile: "./build.config.js",
					minify: false,
					sourceMaps: true,
					build: {
						mangle: false
					}
				},
				files: [{
					"src": "./dist/main.js",
					"dest": "./build/dev.js"
				}]
			}
		}

	});

	grunt.loadNpmTasks('grunt-systemjs-builder');

	grunt.registerTask('build', ['systemjs']);
};


system.config.js

// our app is within the app folder

// from bundle
app: 'build',

// from source
// app: 'dist',


make sure grunt cli is also installed globally

this structure can be further used for dependency injection.