Skip to content

Instantly share code, notes, and snippets.

@robwormald
Last active January 5, 2022 21:21
Show Gist options
  • Save robwormald/429e01c6d802767441ec to your computer and use it in GitHub Desktop.
Save robwormald/429e01c6d802767441ec to your computer and use it in GitHub Desktop.

Angular2 + JSPM cheat sheet

First time setup

  • 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.

Bundling Options

  • 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.
@sandric
Copy link

sandric commented Feb 18, 2016

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.

@Raminsiach
Copy link

With the newest version of angular2 I was able to make the bundle without including any script tags in my main html file. Changes that I made are as follow:
added this to my config.js:

  meta: {
    'npm:angular2@2.0.0-beta.9/*' : {
      deps: [
        'zone.js/dist/zone.js',
        'es6-shim'
      ]  
    } 
  }

and this in my bootstrap file:

import 'reflect-metadata';

my final main html file ended up as this:

<html>
<head>
    <title>Demo App</title>
    <base href="/">    
</head>
<body>
    <my-app>
        Loading...
    </my-app>
    <script src="main.sfx.js"></script>
</body>
</html>

@elimach
Copy link

elimach commented Mar 16, 2016

angular2@2.0.0-beta.9 depends on zone.js@0.5.15. But a install via jspm install angular2 zone.js installs also zone.js@0.6.4. Importing zone.js via import 'zone.js'; breaks Angular2-Change-Detection.

@davinkevin
Copy link

All seems to be ok for me today with JSPM 0.16.31 and

//package.json
"jspm": {
    "dependencies": {
      "angular2": "npm:angular2@^2.0.0-beta.11",
      "reflect-metadata": "npm:reflect-metadata@^0.1.3"
    },
    "devDependencies": {
      "typescript": "npm:typescript@^1.6.2"
    }
  }

and in the main.ts :

/**
 * Created by kevin on 05/03/2016.
 */
import 'reflect-metadata';
import 'angular2/bundles/angular2-polyfills';
import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component.ts';

bootstrap(AppComponent);

All the code is in the following sandbox https://github.com/davinkevin/Angular2-Sandbox/tree/master/JSPM

@DavidGangel
Copy link

With Angular beta 11 it's not working due to:
angular/angular#7652

@Jefftopia
Copy link

@PhilippSoehnlein - can you describe your setup more?

I have

  meta: {
    'angular2/*': {
        deps: [
            'zone',
            'reflect-metadata'
        ]
    }
  },

  map: {
    "angular2": "npm:angular2@2.0.0-beta.12",
    "zone.js": "npm:zone.js@0.6.6",
...

and

error Error: XHR error (404 Not Found) loading http://localhost:2928/web/zone.js
    Error loading http://localhost:2928/web/zone.js as "zone" from http://localhost:2928/web/jspm_packages/npm/angular2@2.0.0-beta.12/platform/browser.js

In other words, it looks like System isn't using my map to locate zonejs.

@amcdnl
Copy link

amcdnl commented May 4, 2016

@robwormald - can u update for rc changes?

@crowmagnumb
Copy link

If I follow @rubyboy's procedure exactly, jspm installs 2.0.0-beta.17 and I get the following ...

system.js:4 Uncaught (in promise) Error: reflect-metadata shim is required when using class decorators

I have searched all over for solutions and none of them work. Anyone else try this with the latest? rc doesn't seem to be available yet on npm.

@playground
Copy link

playground commented May 7, 2016

@robwormald Just installed rc.1,

Error: Error: XHR error (404 Not Found) loading crypto.js
Error loading crypto.js as "crypto" from /jspm_packages/npm/reflect-metadata@0.1.3/Reflect.js

@LearnShare
Copy link

LearnShare commented May 9, 2016

@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.

@LearnShare
Copy link

@crowmagnumb
You need to load 'angular2/bundles/angular2-polyfills.js' with <script> tag.

But the npm:angular2 => npm:@angular/* since 2.0.0-rc.0 , and I can't find 'bundles/angular2-polyfills.js' anywhere.
Any one know that?

@randalvance
Copy link

Anyone used bundling with a component that has templateUrl? The bundled file can't seem to find the html templates.

@cdcooksey
Copy link

cdcooksey commented May 19, 2016

@LearnShare @crowmagnumb Angular2 release candidate removed angular2-polyfills.

It's replaced with this

import 'reflect-metadata';
require('zone.js/dist/zone');

@born2net
Copy link

born2net commented May 28, 2016

be awesome if we could get an example of using TypeScript 2.0 beta using directory mappings so we can get rid of node_modules as in: https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#additional-module-resolution-flags

@vrghost242
Copy link

Got the following issue using jspm for angular2

system.src.js:1051 GET http://127.0.0.1:3000/jspm_packages/npm/angular2@2.0.0-beta.17/angular2.js 500 (Internal Server Error)

Looking at the config.js it reads:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "@angular/material": "npm:@angular/material@2.0.0-alpha.10",
    "angular2": "npm:angular2@2.0.0-beta.17/",
    "es6-shim": "github:es-shims/es6-shim@0.35.1",
    "reflect-metadata": "npm:reflect-metadata@0.1.8",
    "typescript": "npm:typescript@2.1.1",
    "zone.js": "npm:zone.js@0.6.26",
    "github:jspm/nodelibs-assert@0.1.0": {
      "assert": "npm:assert@1.4.1"
    },

And there is no angular2.js in the material@2.0.0-alpha.10 directory. There is one in the bundles directory under material@2.0.0-alpha.10.

In the directory there are the following files:

.jspm-hash
alt_router.d.ts
alt_router.js
alt_router.metadata.json
animate.d.ts
animate.js
common.d.ts
common.js
compiler.d.ts
compiler.js
core.d.ts
core.js
http.d.ts
http.js
http.metadata.json
i18n.d.ts
i18n.js
instrumentation.d.ts
instrumentation.js
LICENSE
package.json
README.md
router.d.ts
router.js
router.metadata.json
testing.d.ts
testing.js
testing_internal.d.ts
testing_internal.js
upgrade.d.ts
upgrade.js

Any idea what (most likely I did) wrong.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment