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的{{1}}属性指向main。

有关程序包解析算法的详细信息，请参阅此处：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 modal＆amp; system.js

1 个答案: