angular2 最终版本 ng-bootstrap systemjs.config.js 问题

Question

angular 的人们最近发布了 angular2 最终版本.2

一切都很好，但 systemjs.config.js 坏了。我查看了他们针对 angular2 核心库的官方快速启动和固定配置，但是 ng-bootstrap配置仍然是坏的。我想这里有人可以帮助我

我收到 404

http://localhost:8080/my-proj/node_modules/%40ng-bootstrap/ng-bootstrap/ 404(未找到)

以下是我的systemjs.config.js

(function (global) {

  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
     '@ng-bootstrap':              'npm:@ng-bootstrap',
      '@ng-bootstrap/ng-bootstrap':'npm:@ng-bootstrap/ng-bootstrap',


      '@ng-bootstrap/accordion':'npm:@ng-bootstrap/ng-bootstrap/accordion',
      '@ng-bootstrap/alert': 'npm:@ng-bootstrap/ng-bootstrap/alert',
      '@ng-bootstrap/bundles': 'npm:@ng-bootstrap/ng-bootstrap/bundles',
      '@ng-bootstrap/buttons': 'npm:@ng-bootstrap/ng-bootstrap/buttons',
      '@ng-bootstrap/carousel': 'npm:@ng-bootstrap/ng-bootstrap/carousel',
      '@ng-bootstrap/collapse': 'npm:@ng-bootstrap/ng-bootstrap/collapse',
      '@ng-bootstrap/dropdown': 'npm:@ng-bootstrap/ng-bootstrap/dropdown',
      '@ng-bootstrap/esm': 'npm:@ng-bootstrap/ng-bootstrap/esm',
      '@ng-bootstrap/modal': 'npm:@ng-bootstrap/ng-bootstrap/modal',
      '@ng-bootstrap/pagination': 'npm:@ng-bootstrap/ng-bootstrap/pagination',
      '@ng-bootstrap/popover': 'npm:@ng-bootstrap/ng-bootstrap/popover',
      '@ng-bootstrap/progressbar': 'npm:@ng-bootstrap/ng-bootstrap/progressbar',
      '@ng-bootstrap/rating': 'npm:@ng-bootstrap/ng-bootstrap/rating',
      '@ng-bootstrap/tabset': 'npm:@ng-bootstrap/ng-bootstrap/tabset',
      '@ng-bootstrap/timepicker': 'npm:@ng-bootstrap/ng-bootstrap/timepicker',
      '@ng-bootstrap/tooltip': 'npm:@ng-bootstrap/ng-bootstrap/tooltip',
      '@ng-bootstrap/typeahead': 'npm:@ng-bootstrap/ng-bootstrap/typeahead',
      '@ng-bootstrap/util': 'npm:@ng-bootstrap/ng-bootstrap/util',

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

我之前适用于 angular rc.6 的配置如下

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    '@ng-bootstrap':              'node_modules/@ng-bootstrap',
    '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    '@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'upgrade'
  ];
  var ngBootstrapPackageNames = [
    'accordion',
    'alert',
    'bundles',
    'buttons',
    'carousel',
    'collapse',
    'dropdown',
    'esm',
    'modal',
    'pagination',
    'popover',
    'progressbar',
    'rating',
    'tabset',
    'timepicker',
    'tooltip',
    'typeahead',
    'util'
  ];

  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

  function ngBootstrapPackIndex(pkgName) {
    packages['@ng-bootstrap/ng-bootstrap/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
  }



  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);

  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

Answer 1

如变更日志中所述

https://github.com/ng-bootstrap/ng-bootstrap/compare/1.0.0-alpha.4...1.0.0-alpha.5

If you are using SystemJS, you should adjust your configuration to point to the UMD bundle.

所以我想你应该使用如下所示的配置:

'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'

Plunker Example