angular2 modal＆system.js

Question

system.jsは、基本的なangular2-modal javascriptファイルを読み込まないため、私は理由を知りません。

(function(global) { 
    var paths = { 
    'npm:': '../node_modules/' 
    }; 
    // map tells the System loader where to look for things 
    var map = { 
    'app':        'js', 
    '@angular/core':      'npm:@angular/core', 
    '@angular/common':     'npm:@angular/common', 
    '@angular/compiler':     'npm:@angular/compiler', 
    '@angular/http':      'npm:@angular/http', 
    '@angular/platform-browser':   'npm:@angular/platform-browser', 
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic', 
    '@angular/router':     'npm:@angular/router', 
    '@angular/upgrade':     'npm:@angular/upgrade', 
    'rxjs':        'npm:rxjs', 
    'moment':        'npm:moment', 
    'angular2-moment':     'npm:angular2-moment', 
    'angular2-modal':      'npm:angular2-modal/bundles', 
    'angular2-modal-bootstrap':   'npm:angular2-modal/bundles' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':        { main: 'main', defaultExtension: 'js' }, 
    'rxjs':        { defaultExtension: 'js' }, 
    'moment':        { main: './moment', defaultExtension: 'js' }, 
    'angular2-moment':     { main: './index', defaultExtension: 'js' }, 
    'angular2-modal':      { main: './angular2-modal.umd', defaultExtension: 'js' }, 
    'angular2-modal-bootstrap':   { main: './angular2-modal.bootstrap.umd', defaultExtension: 'js' } 
    }; 
    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'upgrade', 
    ]; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(function(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'bundles/'+pkgName+'.umd.js', defaultExtension: 'js' }; 
    }); 
    var config = { 
    paths, 
    map, 
    packages 
    } 
    System.config(config); 
}(this)); 

ロードされている「angular2-modal.bootstrap.umd.js」（私はネットワーク]タブでそれを参照してください）が、「angular2-modal.umd.js」がありません：これは私の設定です。奇妙なことは、system.jsファイルから 'angular2-modal-bootstrap'エントリを削除した場合、ベース 'angular2-modal.umd.js'が正しくロードされていることです。私はここで何か悪いことをしますか？

Answer 1

これは動作するはずです：

var map = { 
    'angular2-modal': 'npm:angular2-modal', 
    'angular2-modal/plugins/bootstrap': 'npm:angular2-modal/bundles', 
} 

var packages = { 
    'angular2-modal': { 
    main: 'bundles/angular2-modal.umd', 
    defaultExtension: 'js' 
    }, 

    "angular2-modal/plugins/bootstrap": { 
    main: 'angular2-modal.bootstrap.umd', 
    defaultExtension: 'js' 
    } 

} 

なぜこの仕事をしますか？

NodeJSは、TypeScriptがパッケージを解決する方法と同様に、非ローカルパッケージを解決します。 Basciallyでは、package.json（メインプロパティが指定されている場合）またはindex.jsのいずれかが見つかるまで、NodeJSはディレクトリチェーンを検索して、場所がangular2-modal/plugins/bootstrapのパッケージを検索します。この場合、node_modules/angular2-modal/plugins/bootstrapの下にmainプロパティがindex.jsを指しているpackage.jsonがあるので、node_modulesのパッケージを解決します。パッケージの解決アルゴリズムの詳細については

はこちらをご覧ください：https://www.typescriptlang.org/docs/handbook/module-resolution.html#how-nodejs-resolves-modules

、ここで：

https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders