angular2模式和system.js

Question

system.js没有加载基本的角度2模式的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将通过向上搜索目录链，直到找到package.json (如果指定了主属性)或index.js，来搜索位置为angular2-modal/plugins/bootstrap的包。在本例中，它将解析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