- 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.
@playground I got that error too, and I install crypto with jspm:
jspm install crypto, then it works.My package.json:
{ "devDependencies": { "jspm": "^0.16.34" }, "jspm": { "configFile": "jspm.config.js", "dependencies": { "@angular/core": "npm:@angular/core@^2.0.0-rc.1", "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@^2.0.0-rc.1", "@angular/router": "npm:@angular/router@^2.0.0-rc.1", "crypto": "github:jspm/nodelibs-crypto@^0.1.0", "css": "github:systemjs/plugin-css@^0.1.21", "less": "github:aaike/jspm-less-plugin@^0.0.5", "normalize.css": "github:necolas/normalize.css@^4.1.1", "reflect-metadata": "npm:reflect-metadata@^0.1.3", "rxjs": "npm:rxjs@^5.0.0-beta.7", "text": "github:systemjs/plugin-text@^0.0.8", "ts": "github:frankwallis/plugin-typescript@^4.0.9", "zone.js": "npm:zone.js@^0.6.12" }, "devDependencies": { "typescript": "npm:typescript@^1.6.2" } } }I will try to make a https://github.com/angular/quickstart/ demo with jspm, it takes me almost a week to get it run.
https://github.com/LearnShare/angular-quickstart-jspm
Trying to make it auto-build-reload in jspm way.