How to resolve #angular dependencies when using ExpressJS and Angular2? - express

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:
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
Map /scripts URLs to node_modules folder in ExpressJS
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))
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);`