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解析包的非本地包。基本上，NodeJS將通過搜索目錄鏈來搜索位置爲angular2-modal/plugins/bootstrap的包，直到找到package.json（如果它指定了主屬性）或index.js。在這種情況下，它將解析node_modules下的程序包，因爲在node_modules/angular2-modal/plugins/bootstrap下，有一個package.json，其中main屬性指向index.js。

有關包解析算法更多信息，請瀏覽：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