title: GET XHR http://localhost:3000/traceur Angular 4
body: <p>I'm facing the following Error: (SystemJS) XHR error (404 Not Found) loading <a href="http://localhost:3000/traceur" rel="nofollow noreferrer">http://localhost:3000/traceur</a>.
  My systemjs.config.js is currently looking at index.js from ngx-qrcode3 but it seems that the tracer is unable to transpile the file. I'm wondering if the error comes from the fact that this file is using annotations like</p>
  
  <pre><code>/**
   * @param {?} canvas
   * @return {?}
   */
  </code></pre>
  
  <p><strong>systemjs.config.js</strong></p>
  
  <pre><code>(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/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
              '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
              '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
              'ngx-qrcode3': 'npm:ngx-qrcode3/index.js',
  
              // other libraries
              'rxjs': 'npm:rxjs'
          },
          // 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'
              }
          },
      });
  })(this);
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  import { AppComponent } from './app.component';
  import { routing } from './app.routing';
  
  import { NgxQRCodeModule } from 'ngx-qrcode3';
  import { customHttpProvider } from './_helpers/index';
  import { AlertComponent } from './_directives/index';
  import { AuthGuard } from './_guards/index';
  import { AlertService, AuthenticationService, UserService } from './_services/index';
  import { HomeComponent } from './home/index';
  import { LoginComponent } from './login/index';
  import { RegisterComponent } from './register/index';
  
  @NgModule({
      imports: [
          BrowserModule,
          FormsModule,
          HttpModule,
          routing,
          NgxQRCodeModule
      ],
      declarations: [
          AppComponent,
          AlertComponent,
          HomeComponent,
          LoginComponent,
          RegisterComponent
      ],
      providers: [
          customHttpProvider,
          AuthGuard,
          AlertService,
          AuthenticationService,
          UserService
      ],
      bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>