Angular2 Dependency Injection using systemjs

• Create a Angular2 module / package and bundle it into single file.

see post on how to create bundled modules in angular2.
or clone this minimal module setup to create bundle package.

for loading your package we can use local file path (e.g. ./packages) or hosted package (e.g. htttp://localhost/package_server)

• create package folder into root of app. and paste bundle files of package e.g. dev.js and main.js and rename the files to package_name.js and package_name.dev.js

• if your package contain component, add it to routes of main app.

routes.ts

1
2
3
4
{
	path: 'package',
	loadChildren: 'package/package_name'
}

• add link of new package component

main.html

1
<a routerLink="/package">package</a>

• update system.config.js (add package path)

system.config.js

1
2
3
4
5
6
7
8
9
10
11
12
packages: {
	// for un minified package
	// 'package/app.package':{
	//   main: './main.js',
	//   defaultExtension: 'js'
	// },
	// for minified package
	// package_folder/package_name
	'package/package_name':{
		defaultExtension: 'js'
	}
},

build and run your app, now package will load on demand (when you click the route for that package)

clone this repo for demo (app and package).