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?

You have to add the upgrade bundle. It was separated from the main bundle. — Eric Martinez
– Eric Martinez, Commented Dec 22, 2015 at 21:05
Add it just like you did add angular, http and router bundles. There's no need to map it through System.config. — Eric Martinez
– Eric Martinez, Commented Dec 22, 2015 at 21:15
Yep. You have to add angular2-polyfills.js as well. This one must be added on the top of any other bundle. — Eric Martinez
– Eric Martinez, Commented Dec 22, 2015 at 21:19
You should not load Angular2 via script tags. That pollutes your global namespace with a bunch of junk and defeats the point of modules (thumbsdown UMD) — Aluan Haddad
– Aluan Haddad, Commented Feb 27, 2017 at 9:41

danday74 · Accepted Answer · 2017-03-30 11:55:31Z

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.

Collectives™ on Stack Overflow

SystemJS will not load angular2 from node_modules

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