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