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

Question

我正在尝试使用索引文件中的 system.config 从我的 Angular 2 项目中的 node_modules 映射此 Auth0 模块。但我在浏览器控制台中收到 404 错误

索引文件

<!-- 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>

控制台报错如下

我已将脚本包含在索引文件中，如下所示

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

按照 Auth0 网站上关于 node.js / Angular 2 的教程进行操作

我正在尝试从 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

你可以试试这个配置：

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

这样，当您尝试导入 angular2-jwt 时，node_modules/angular2-jwt/angular2-jwt.js 将被加载（这是一个符合 commonjs 的）：

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