Angular 2 System.config映射返回404错误

Question

I am trying to map this Auth0 module from node_modules in my Angular 2 project using the system.config in index file. but I am getting 404 error in the browser console

index file

<!-- 2. Configure SystemJS -->
<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      "/angular2-jwt": {
      "defaultExtension": "js"
      }        
    },
    map: {
      "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt"
    }
  });
  System.import('app/bootstrap')
        .then(null, console.error.bind(console));
</script>

The console error is as follows

I have included the script in the index file as follows

<script src="//cdn.auth0.com/js/lock-9.0.min.js"></script>

Following the tutorial on Auth0 website for node.js / Angular 2

I am trying to load the login button from template of Appcomponent.ts

Appcomponent.ts

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AuthHttp,AuthConfig, tokenNotExpired, AUTH_PROVIDERS} from 'angular2-jwt';

import {HomeComponent} from '../home/HomeComponent'
import {AboutComponent} from '../about/AboutComponent'

declare var Auth0Lock;

@RouteConfig([
    {path: 'app/', component: HomeComponent, as: 'Home'},
    {path: 'app/about', component: AboutComponent, as: 'About'},
])
@Component({
    selector: 'my-app',
    /*template: '<router-outlet></router-outlet>',*/
    template: `
    <h1>Welcome to Angular2 with Auth0</h1>
    <button >Login</button>
    <button >Logout</button>
     `,
    directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { 

    lock = new Auth0Lock('<<KEY>>', '<<Auth0_URL>>');

  constructor() {}

  login() {
    var hash = this.lock.parseHash();
    if (hash) {
      if (hash.error)
        console.log('There was an error logging in', hash.error);
      else
        this.lock.getProfile(hash.id_token, function(err, profile) {
          if (err) {
            console.log(err);
            return;
          }
          localStorage.setItem('profile', JSON.stringify(profile));
          localStorage.setItem('id_token', hash.id_token);
        });
    }
  }

  logout() {
    localStorage.removeItem('profile');
    localStorage.removeItem('id_token');
  }

  loggedIn() {
    return tokenNotExpired();
  }

}

gulpfile.js

var gulp = require('gulp');
var path = require('path');
var sourcemaps = require('gulp-sourcemaps');
var ts = require('gulp-typescript');
var del = require('del');
var concat = require('gulp-concat')
var runSequence = require('run-sequence');

// SERVER
gulp.task('clean', function(){
    return del('dist')
});


gulp.task('move-models',function(){
    return gulp.src('server/models/bear.js')  
    .pipe(gulp.dest('dist/models'));

});

gulp.task('move-css',function(){
    return gulp.src(['client/app/assets/app.css','client/app/assets/app2.css','client/app/assets/light-bootstrap-dashboard.css','client/app/assets/demo.css','client/app/assets/pe-icon-7-stroke.css','client/app/assets/bootstrap.min.css'],{base: 'client/'})  //to move multiple files with fodler structure use 'base' property. didn't work when tried. 
    .pipe(gulp.dest('dist'));
});

gulp.task('move-template',function(){
    return gulp.src('client/app/templates/*')  //to move multiple files with fodler structure use 'base' property. didn't work when tried. 
    .pipe(gulp.dest('dist/app/templates'));
});




gulp.task('build:server', function () {
    var tsProject = ts.createProject('server/tsconfig.json');
    var tsResult = gulp.src('server/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject))
    return tsResult.js
        .pipe(concat('server.js'))
        .pipe(sourcemaps.write()) 
        .pipe(gulp.dest('dist'))
});


// CLIENT

/*
  jsNPMDependencies, sometimes order matters here! so be careful!
*/
var jsNPMDependencies = [
    'angular2/bundles/angular2-polyfills.js',
    'systemjs/dist/system.src.js',
    'rxjs/bundles/Rx.js',
    'angular2/bundles/angular2.dev.js',
    'angular2/bundles/router.dev.js'
] 

gulp.task('build:index', function(){
    var mappedPaths = jsNPMDependencies.map(file => {return path.resolve('node_modules', file)}) 

    //Let's copy our head dependencies into a dist/libs
    var copyJsNPMDependencies = gulp.src(mappedPaths, {base:'node_modules'})
        .pipe(gulp.dest('dist/libs'))

    //Let's copy our index into dist   
    var copyIndex = gulp.src('client/index.html')
        .pipe(gulp.dest('dist'))
    return [copyJsNPMDependencies, copyIndex];
});

gulp.task('build:app', function(){
    var tsProject = ts.createProject('client/tsconfig.json');
    var tsResult = gulp.src('client/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject))
    return tsResult.js
        .pipe(sourcemaps.write()) 
        .pipe(gulp.dest('dist'))
});


gulp.task('build', function(callback){
    runSequence('clean','move-models','move-template','move-css','build:server', 'build:index', 'build:app', callback);
});

gulp.task('default', ['build']);

Answer 1

You could try this configuration instead:

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }        
    },
    map: {
      "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt.js" <-----
    }
  });
  System.import('app/bootstrap')
        .then(null, console.error.bind(console));
</script>

This way when you try to import the angular2-jwt the node_modules/angular2-jwt/angular2-jwt.js will be loaded (it's a commonjs-compliant one):

import {AuthHttp, AuthConfig, AUTH_PROVIDERS} from 'angular2-jwt';