ng-bootstrap angular2 final release systemjs.config.js configuration problem

with angular2 final release my ng-bootstrap systemjs.config.js configuration brooke

zone.js:1274 GET http://localhost:8080/mbs/traceur 404 (Not Found)

can some one help me with that

with angular rc.6 ng-bootstrap configuration which works perfect

(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);

I tried to make it work with angular2 final release some thing as following (broken)

(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);

1 possible answer(s) on “ng-bootstrap angular2 final release systemjs.config.js configuration problem

  1. hey buddy some one helped me on stackoverflow and resolved the issue.

    simply load bundle instead of individual modules. check out below

    (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/bundles/ng-bootstrap.js',
    
        },
        // 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);