angular: Traceur not found : XHR (404 not found) error.

0 down vote There are multiple reason behind this error,

1)Sometimes comments mentioned on top of app.component.ts file 2)pointing to incorrect umd file 3)If you are using ts(Transcript) version, please mention the transpiler options in config.js file as below or compile your all .ts file to .js file using transpiler and then reference .js file in code:

(function (global) { System.config({ transpiler: ‘ts’, typescriptOptions: { tsconfig: true }, 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’, ‘angular2’ : ‘’ }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: ‘./main’, defaultExtension: ‘ts’ }, rxjs: { defaultExtension: ‘js’ }, ‘angular-in-memory-web-api’: { main: ‘./index.js’, defaultExtension: ‘js’ } } }); })(this);

Map your @angular modules to grab the .umd.js version of the build, as in: https://github.com/angular/quickstart/blob/master/systemjs.config.js

 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',
    },
    // 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'
      }
    }
  });

I got this working by changing my tsconfig. initially I had "compilerOptions": { "target": "es5", "module": "es6", "moduleResolution": "node", "sourceMap": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": true, "typeRoots": [ "./node_modules/@types" ], "types": [ "core-js" ], "listFiles": true }

but then I changed it to

"compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": true, "typeRoots": [ "./node_modules/@types" ], "types": [ "core-js" ], "listFiles": true }``

notice the “module” option is the change. You cannot have module es6 and target es5.

What helped me out was getting the stack trace into the console by not catching the error when loading systemjs

System.import(‘app’);

will allow for more information than

System.import(‘app’).catch(function(err){ console.error(err); });

some mentioned doing the above in another thread about this error and it gave me alot more information to work with.

Hope this helps. I spent hours.

@vanrado you’re pulling the deps from src, it should be from bundles. The src folder is probably in es2015, that’s why traceur is being pulled.

Here’s the breaking change, by the way: https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes (the first one)

I solved my issue. Below the traceur error I had an error claiming it also can’t require the @angular/router package. I had to change the systemjs.config.js to point to the umd.js file instead of the index.js. I hope it makes sense to some of you.