angular2 模态 & 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

angular2 模态 & system.js

angular2 modal & system.js

systemjs

angular2-modal

angular