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 a yo angular project with TypeScript enabled.

I installed everything (using npm installation):

 <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 configuration:

  <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 override it in my .tmp:

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

But SystemJS does not know how to load the import. I get 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

As a best practice, consider the approach suggested by Angular2 quickstart .

Here we see index.html 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 that all dependencies and gaskets are fulfilled. Everything else should be loaded on demand using SystemJS.

This ensures that everything is NOT loaded, but loaded as needed. Thus, loading the initial application is much faster, since you need to download less. Modules such as RxJS, etc., are then loaded upon use.

SystemJS code for downloading ng2 is located in systemjs.config.js , as indicated 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); 

Do not forget files that link to systemjs.config.js, such as systemjs-angular-loader.js

Of course, these days we have the opportunity to use the Angular CLI to run our project for us without these headaches, the Angular CLI uses Webpack. Despite this, I remain a loyal fan of SystemJS because it implements the W3 standard that will stay with us! Webpack can be replaced by a beginner at any time.