Angular2 System.config map 404エラーを返す

Question

index_fileのsystem.configを使用して、angle2プロジェクトの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> 

チューターに続いて私は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']); 

のテンプレートからログインボタンをロードしようとしています2

角度のNode.js /ためauth0ウェブサイトにIAL

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-jwtnode_modules/angular2-jwt/angular2-jwt.jsは（それがcommonjs準拠の一つだ）ロードされますインポートしようこの方法：

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