Why the 'traceur 404 (Not Found)' only on adding ngx-bootstrap?

Question

The application was working fine till I tried to add 'ngx-bootstrap', following is the error.

(index):20 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
    Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/ngx-bootstrap/ng2-bootstrap.js
    Error loading http://localhost:3000/node_modules/ngx-bootstrap/ng2-bootstrap.js as "ngx-bootstrap" from http://localhost:3000/app/app.module.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/ngx-bootstrap/ng2-bootstrap.js
    Error loading http://localhost:3000/node_modules/ngx-bootstrap/ng2-bootstrap.js as "ngx-bootstrap" from http://localhost:3000/app/app.module.js

Have tried so many solution like: - update systemjs.config.js - check the typescript comment (/**) - import the umd file in-staid of .TS

but none of them are able to resolve an error, Can anybody explain me what I have done wrong? Any suggestion appropriated...

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <pre class="card card-block card-header">Model: {{selected | json}}</pre>
    <input [(ngModel)]="selected"
           [typeahead]="states"
           class="form-control">
  `,
})
export class AppComponent  { 
    public selected: string;
    public states: string[] = ['Alabama', 'Alaska', 'Arizona', 'Arkansas',
        'California', 'Colorado',
        'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho',
        'Illinois', 'Indiana', 'Iowa',
        'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts',
        'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico',
        'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon',
        'Pennsylvania', 'Rhode Island',
        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
        'Virginia', 'Washington',
        'West Virginia', 'Wisconsin', 'Wyoming'];
}

app.module.ts

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';

    import { AppComponent }  from './app.component';
    import { UserComponent }  from './components/user.component';



    import { TypeaheadModule } from 'ngx-bootstrap';


    @NgModule({
      imports:      [ BrowserModule, FormsModule, TypeaheadModule.forRoot()],
      declarations: [ AppComponent, UserComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

systemjs.confing.js

    /**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(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',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',


      'ngx-bootstrap': 'npm:ngx-bootstrap'    

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            defaultExtension: 'js',
            meta: {
                './*.js': {
                    loader: 'systemjs-angular-loader.js'
                }
            }
        },
        rxjs: {
            defaultExtension: 'js'
        }
        'ngx-bootstrap': {
            main: 'ng2-bootstrap.js',
            defaultExtension: 'js'
        }
    }
  });
})(this);

Answer 1

Try changing your ngx-bootstrap main to be bundles/ngx-bootstrap.umd.js instead of ng2-bootstrap.js. So, in packages, your entry would look like:

  'ngx-bootstrap': {
    main: 'bundles/ngx-bootstrap.umd.js',
    defaultExtension: 'js'
  },

See https://github.com/angular/angular/issues/11358 for more.