typescript-angular-seed

A prototype for a single page application based on angular, written in TypeScript and modularized with JSPM and SystemJS. It also takes advantage of TypeScript decorators for angular(at), which allows an angular 2-like implementation.

Installation

Node.js and npm are required

npm install

This also runs jspm install and tsd install

Running development server

Runs a server, which listens to file changes (Browser is automatically opened). TypeScript is compiled on the browser.

npm run serve

Creating build

Creates a build in dist/ directory. All JS files are bundled and minifed to build.js. CSS is compressed to main.css.

npm run build:prod

Run production server

Runs npm run build:prod, copies src files to test for debugging and runs a server. Notice: If you want to publish your dist/ directory you should run npm run build:prod again to get rid of the src directory within dist(or simply delete src from `dist)

npm run serve:prod

Testing

Runs mocha tests defined in test/spec within karma and creates code coverage with istanbul (test/coverage).

npm run serve:prod

Documentation

SystemJS

Since JSPM removes comments from the SystemJS config file (src/config.js) it is important to explain some configurations:

packages

The SystemJS documentation for packages can be found here

• ./app is defined for development.
• ./src/app is for bundling (JSPM tries to load the files from ./src/app)
• ./base is for testing (The base directory of the karma runner is ./base.
  When running tests, the ts files are all compiled. That's why the glob looks like ./app/*.js)

  packages: {
    "./app": {
      "defaultExtension": "ts"
    },
    "./src/app": {
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        }
      }
    },
    "./base": {
      "meta": {
        "./app/*.js": {
          "format": "register"
        }
      }
    }
  },

meta

The SystemJS documentation for meta can be found here

• at: This defines the reflect-metadata library as a dependency for angular-typescript library
• reflect-metadata/* SystemJS scans a library for require syntax if esm, csj or amd is defined as
  format, if found it tries to load
  the required module in any case. reflect-metadata contains
  a require call. That is why this is set to global.

  meta: {
    "at": {
      "deps": [
        "reflect-metadata"
      ]
    },
    "reflect-metadata/*": {
      "format": "global"
    }
  },