How to load Angular 2 with SystemJS in a Brunch.io app

Viewed 721

I am using a simple Brunch.io skeleton for Angular 2. The complete source code can be found here.

I'm now trying to load Angular with SystemJS. And it fails.

First I added systemjs to my package.json and ran npm install:

  // [..]
  "dependencies": {
    "angular2": "2.0.0-beta.11",
    "systemjs": "0.19.24",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "sass-brunch": "^2.0.0",
    "zone.js": "0.6.5"
  },
  // [..]

I then required it in vendor.ts where all javascript is imported:

// ./app/vendor.ts

import 'es6-shim';
import 'es6-promise';
import 'zone.js';
// Fix for error "ZoneSpec required"
// https://github.com/angular/angular/issues/7660
// http://stackoverflow.com/questions/36112548/setup-angularjs-2-project-using-jspm
import 'zone.js/dist/long-stack-trace-zone';
import 'reflect-metadata';
// Add systemjs
import 'systemjs';

if ('production' === 'BRUNCH_ENVIRONMENT') {
  let ngCore = require('angular2/core');
  ngCore.enableProdMode();
}

// Angular 2
import 'angular2/platform/browser';
import 'angular2/platform/common_dom';
import 'angular2/router';
import 'angular2/http';
import 'angular2/core';

// RxJS
import 'rxjs';

Compiling results in this error:

error: Resolving deps of node_modules/when/es6-shim/Promise.js failed. 
Could not load module '../format' from '/APP/node_modules/when/es6-shim'. 
Make sure the file actually exists. ; Resolving deps of node_modules/systemjs/dist/system.src.js 
failed. Improperly-cased require: 'fs' in /APP/node_modules/systemjs/dist/system.src.js

Now I'm out of wit and need some help.

0 Answers
Related