SystemJS will not load angular2 from node_modules

Question

I am trying to add Angular2 to my current Angular 1.X projects. I am using yo angular project, with TypeScript enabled.

I installed everything (using npm install):

<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>

And I added the following config:

     <script>
        System.config({
          packages: {
            app: {
              format: 'cjs',
              defaultExtension: 'js'
            }
          },
          paths: {
            'angular2/upgrade': '../node_modules/angular2/upgrade'
          }

        });

         System.import('scripts/bootstrap.js').then(null, console.error.bind(console));

    </script>

Now, inside my Bootstrap.ts I use:

import {UpgradeAdapter} from 'angular2/upgrade';

Typescript knows how to transpile it, into my .tmp:

var upgrade_1 = require('angular2/upgrade');

But SystemJS doesn't know how to load the import. I am getting 404 error:

GET http://localhost:9000/node_modules/angular2/upgrade 404 (Not Found)

My directory structure:

root
- .tmp
- node_modules
- app
|-- index.html
|-- scripts

What am I missing here?

Answer 1

Consider the approach taken by the Angular2 quickstart project as best practice.

Here we see in index.html they, using script tags, load ..

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>

This ensures all dependencies and shims are in place. Everything else should be loaded on demand using SystemJS.

This ensures that NOT everything is loaded up front but is instead loaded as needed. That way the initial app load is much faster since less must be loaded. Modules such as RxJS, etc are then loaded when used.

The SystemJS code for loading ng2 is found in systemjs.config.js as listed here for ease of reference ..

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Don't forget files referenced in systemjs.config.js such as systemjs-angular-loader.js

Of course, these days we have the option of using Angular CLI to kick off our project for us without these headaches, Angular CLI uses Webpack. Despite this, I remain a staunch SystemJS fan because it implements a W3 standard that will remain with us! Webpack may be superceded by a newcomer at any time.