- install jspm beta:
npm install -g jspm@beta - set up your project:
jspm init - install dependencies:
jspm install angular2 reflect-metadata zone.js es6-shim
This will create a jspm_packages folder, and a config.js file.
Open the config.js file - this file manages options for the System.js loader - tweak it as appropriate
System.config({
"baseURL": "/",
"defaultJSExtensions": true,
"transpiler": "typescript",
//add this if using typescript
"typescriptOptions":{
"module":"commonjs",
"emitDecoratorMetadata": true
},
//add this if using traceur
"traceurOptions": {
"annotations" : true,
"memberVariables" : true,
"types" : true
},
//add this if using babel
"babelOptions": {
"optional" : ["runtime"],
"stage" : 1
},
"paths": {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
//this lets us use app/ for our package as a sort of virtual directory
"app": "src"
},
//this configures our app paths
"packages": {
"app": {
"main": "main",
"defaultExtension": "js" //or "ts" for typescript
}
}
});Create a new src directory, and a main.js or main.ts file inside of it:
//import deps
import 'zone.js';
import 'reflect-metadata';
//you may need es6-shim if you get an error relating to list.fill
//import es6-shim;
//if using traceur compiler:
import {
ComponentAnnotation as Component,
ViewAnnotation as View,
bootstrap
} from 'angular2/angular2';
//OR
//if using babel or typescript compiler:
import {
Component,
View,
bootstrap
} from 'angular2/angular2';
//create a simple angular component
@Component({
selector: 'test-app'
})
@View({
template: '<h4>Hello {{name}}</h4>'
})
class TestApp {
name: string;
constructor(){
this.name = 'Angular2';
setTimeout(() => {
this.name = 'Angular2!!!'
},1500);
}
}
//start our app
bootstrap(TestApp);Create an index.html page:
<html>
<head>
<title>Demo App</title>
<!-- systemJS loader and config -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
</head>
<body>
<!-- our angular2 component -->
<test-app>
Loading...
</test-app>
<!-- import and run our app -->
<script>
System.import('app');
</script>
</body>
</html>Start a local server http-server or python -m SimpleHTTPServer and open localhost:8080 in your browser.
jspm bundle app dist/main.js --inject- outputs a single bundle and adds it to the config file, SystemJS will load it instead of 11ty files.jspm bundle app dist/main.min.js --minify- outputs a minified single bundle you can include in a script tag after System.js and your config.jspm bundle-sfx app dist/main.sfx.js- outputs a single file you can include without any other dependencies.
I'm testing it with beta.0 now. Finally I understand what is going on. The issue with
reflect-metadataandZonenow fixed by just in one conclusion:Explanation:
The angular2-polyfills.js contain script for
zone.jsandreflect-metadata. In the documentation shows the script tag ordered above thesystem.jsas shown below.Even though we can import normal js using jspm, zone.js is not the case. So we follow the script tag sequence in the Angular2 documentation.
Based on the 5min QuickStart:
Run
jspm initandjspm install angular2 rxjs.Change the script
index.htmlfrom this:to this:
Import the
rxjs. TypeScript example inboot.ts:Now everything is working including jspm bundling. Furthermore any changes on next beta release is easy to be updated, just change the script tag starting from the system.src.js. Hopefully Angular2 will support jspm on next beta release.