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:

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?

Use static in ExpressJS: expressjs.com/en/starter/static-files.html — IceManSpy
– IceManSpy, Commented Jul 17, 2016 at 9:01
In any particular fashion? I have some static routes set (eg. app.use('/scripts', express.static('./node_modules/'))), but I was hoping to avoid a static route attached to the root "/" — Micheal Hill
– Micheal Hill, Commented Jul 17, 2016 at 9:53
I tried adding that, but the same issue occurs (using /scripts or not makes no difference). Zone.js is trying to load something there and it's not working. — Micheal Hill
– Micheal Hill, Commented Jul 18, 2016 at 3:36

Micheal Hill · Accepted Answer · 2016-07-18 04:53:02Z

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);`

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related