- 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.
Well, IDK why, but that resolved somehow, so don't mind, sorry.
Anyone can help me understanding why does ES6 classes could not be imported in typescript file? Is there some flag I should add to importing also js files and not only typescript .ts one? thx.