How to resolve @angular dependencies when using ExpressJS and Angular2?

Question

I'm trying to write a web application with ExpressJS and Angular2. Zone.js appears to be trying (unsuccessfully) to load some @angular libraries, but I'm not sure how to approach fixing it.

My process so far looks like this:

1. Copied into my build/node_modules folder:
   • core-js/client/shim.min.js
   • zone.js/dist/zone.js
   • reflect-metadata/Reflect.js
   • systemjs/dist/system.src.js
2. Map /scripts URLs to node_modules folder in ExpressJS

3. On my index page, source the above libraries in script tags and load SystemJS:

   System.config({
       packages: {
           app: {
               defaultExtension: 'js'
           },
           rxjs: {
               defaultExtension: 'js'
           }
       },
       map: {
           'rxjs': '/scripts/rxjs',
           '@angular': '/scripts/@angular'
       }
   })
   
   System.import('/app/bootstrap')
           .then(null, console.error.bind(console))
   

4. And finally, my bootstrap.ts file:

   import { bootstrap } from '@angular/platform-browser-dynamic'
   import { Component } from '@angular/core'
   @Component({
       selector: 'testing-ang2',
       template: '<span>WIP</span>'
   })
   export class Ang2TestComponent {}
   
   bootstrap(Ang2TestComponent)
   

---

However, when I run this, I get the following errors:

zone.js:101 GET http://localhost:3000/scripts/@angular/platform-browser-dynamic/ 404 (Not Found)
zone.js:323 Error: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:3000/scripts/@angular/platform-browser-dynamic
zone.js:101 GET http://localhost:3000/scripts/@angular/core/ 404 (Not Found)

I've tried copying the @angular library into my build/node_modules and adding the index.js file from each of the folders listed into <script> tags on my main page, but that doesn't make any difference.

---

Could anyone suggest a way to fix this?

Answer 1

There was two major issues with the configuration above: most of the @angular libraries weren't copied across and SystemJS didn't know how to find them.

To fix the first, copy the entire @angular and rxjs directories into the build/node_modules directory.

For the second, SystemJS needs to be configured like so:

From an issue opened for Angular2 on github:

var map = {
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [ // <-----
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Add package entries for angular packages
  ngPackageNames.forEach(packIndex);
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);`