Skip to content

Instantly share code, notes, and snippets.

@jhades
Created May 12, 2016 08:20
Show Gist options
  • Save jhades/a42e78c587370d2b163d5541c6e27781 to your computer and use it in GitHub Desktop.
Save jhades/a42e78c587370d2b163d5541c6e27781 to your computer and use it in GitHub Desktop.
Setting Up a New Angular 2 Project Using Typescript, SystemJs and SystemJs Builder
var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./system.config.js')
.then(function(){
return builder.bundle(
'app',
'dist/bundle.js'
);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<app></app>
</body>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="system.config.js"></script>
<script src="dist/bundle.js"></script>
<script>
System.import('app').catch(console.log.bind(console));
</script>
</html>
{
"name": "minimal-setup-typescript-systemjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"bundle": "node bundle.js",
"serve": "./node_modules/.bin/http-server -c-1 ."
},
"author": "",
"license": "MIT",
"devDependencies": {
"http-server": "^0.9.0",
"systemjs-builder": "^0.15.16",
"typescript": "^1.8.10",
"typings": "^0.8.1"
},
"dependencies": {
"@angular/common": "^2.0.0-rc.1",
"@angular/compiler": "^2.0.0-rc.1",
"@angular/core": "^2.0.0-rc.1",
"@angular/platform-browser": "^2.0.0-rc.1",
"@angular/platform-browser-dynamic": "^2.0.0-rc.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"symbol-observable": "^0.2.4",
"systemjs": "^0.19.27",
"zone.js": "^0.6.12"
}
}
System.config({
map: {
'rxjs': 'node_modules/rxjs',
'@angular': 'node_modules/@angular',
'app': 'dist',
'symbol-observable': 'node_modules/symbol-observable'
},
packages: {
'@angular/core': {
main: 'index'
},
'@angular/compiler': {
main: 'index'
},
'@angular/common': {
main: 'index'
},
'@angular/platform-browser': {
main: 'index'
},
'@angular/platform-browser-dynamic': {
main: 'index'
},
'rxjs': {
main: "Rx"
},
'app': {
main: 'main'
},
'symbol-observable': {
'main':'index'
}
}
});
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"module": "system",
"moduleResolution": "node",
"removeComments": true,
"sourceMap": true,
"outDir": "dist"
},
"files": [
"src/main.ts",
"typings/main.d.ts"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment