title: Error: XHR error (404 Not Found) loading http://localhost:3622/app.js(…) + angular 2
body: <p>I am trying to build an angular 2 application using typescript in visual studio 2015 application. I am using angular release candidate 1.</p>
  
  <p>I am getting the following error message in the console of my browser while running the application.</p>
  
  <p>index.html:24 Error: Error: XHR error (404 Not Found) loading <a href="http://localhost:3622/app.js" rel="nofollow noreferrer">http://localhost:3622/app.js</a>(…)</p>
  
  <p>I cannot understand why it is trying to look for app.js file. I have set index.html as the start page.</p>
  
  <p>As seen in the code below , I am trying to display data in the datatable. Is there any issue with how I have setup the systemjs.js file or with the system.import statement in index.html file</p>
  
  <p>Please find my folder structure</p>
  
  <p><a href="https://i.stack.imgur.com/3fA54.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3fA54.png" alt="enter image description here"></a></p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Angular 2 Application&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
  
  
      &lt;!-- 1. Load libraries --&gt;
      &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/primeui/primeui-ng-all.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          System.import('app').catch(function (err) { console.error(err); });
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;my-app&gt;Loading..&lt;/my-app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Systemjs.config.js</strong></p>
  
  <pre><code>(function (global) {
  
      // map tells the System loader where to look for things
      var map = {
          'app': 'app', // 'dist',
          'rxjs': 'node_modules/rxjs',
          'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
          '@angular': 'node_modules/@angular',
          'primeng': 'node_modules/primeng'
      };
  
      // packages tells the System loader how to load when no filename and/or no extension
      var packages = {
          '.': { main: 'main.js', defaultExtension: 'js' },
          'rxjs': { defaultExtension: 'js' },
          'angular2-in-memory-web-api': { defaultExtension: 'js' },
      };
  
      var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/testing',
        '@angular/upgrade',
        '@angular/router-deprecated'
      ];
  
      // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
      packageNames.forEach(function (pkgName) {
          packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
      });
  
      var config = {
          map: map,
          packages: packages
      }
  
      // filterSystemConfig - index.html's chance to modify config before we register it.
      if (global.filterSystemConfig) { global.filterSystemConfig(config); }
  
      System.config(config);
  
  })(this);
  </code></pre>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import { bootstrap } from '@angular/platform-browser-dynamic';
  
  // Our main component
  import { AppComponent } from './app/app.component';
  
  
  bootstrap(AppComponent, []).catch(err =&gt; console.error(err));
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { RiskListComponent } from './components/risks/risk-list.component';
  import { DataTable, Column } from 'primeng/primeng';
  
  
  @Component({
      selector: 'my-app',
      providers: [],
      template: `
      &lt;div&gt;
          &lt;h1&gt;{{pageTitle}}&lt;/h1&gt;
            &lt;rm-risks&gt; &lt;/rm-risks&gt; 
       &lt;/div&gt;
       ` ,
      directives: [RiskListComponent, DataTable, Column]
  
  })
  
  export class AppComponent {
      pageTitle: string = 'Test UK Trader'; 
  }
  </code></pre>
  
  <p><strong>risk-list.component.ts</strong>    </p>
  
  <pre><code>import { Component } from '@angular/core'
  import { DataTable, Column } from 'primeng/primeng';
  
  @Component({
      selector: 'rm-risks',
      directives: [DataTable, Column],
      templateUrl: '/app/risks/risk-list.component.html'
  
  
  
      })
  
  export class RiskListComponent {
      pageTitle: string = 'Risk List';
      risks: any[] = [
          {
              "riskId": 1,
              "reference": "HISC9308336",
              "insuredName": "SA 84161",
              "inceptionDate": "March 19, 2016",
              "riskType": "Quote",
              "status": "Indication",
              "grossPremium": "100",
              "allocatedTo": "Broker User",
              "allocatedCompany": "Broker"
          },
          {
              "riskId": 2,
              "reference": "HISC9308340",
              "insuredName": "Upper Loi",
              "inceptionDate": "April 25, 2016",
              "riskType": "Quote",
              "status": "Indication",
              "grossPremium": "312.22",
              "allocatedTo": "Andy Marples",
              "allocatedCompany": "Broker"
          }
      ];
  }
  </code></pre>
  
  <p><strong>risk-list.component.html</strong></p>
  
  <pre><code>&lt;h3 class="first"&gt;{{pageTitle}}&lt;/h3&gt;
  
  &lt;p-dataTable [value]="risks" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]"&gt;
      &lt;p-column field="reference" header="Reference"&gt;&lt;/p-column&gt;
      &lt;p-column field="insuredName" header="Insured Name"&gt;&lt;/p-column&gt;
      &lt;p-column field="inceptionDate" header="Inception Date"&gt;&lt;/p-column&gt;
      &lt;p-column field="riskType" header="Risk Type"&gt;&lt;/p-column&gt;
      &lt;p-column field="status" header="Status"&gt;&lt;/p-column&gt;
      &lt;p-column field="grossPremium" header="Gross Premium"&gt;&lt;/p-column&gt;
      &lt;p-column field="allocatedTo" header="Allocated To"&gt;&lt;/p-column&gt;
      &lt;p-column field="allocatedCompany" header="Allocated Company"&gt;&lt;/p-column&gt;
  &lt;/p-dataTable&gt;
  </code></pre>
  
  <p><strong>tsconfig.js</strong></p>
  
  <pre><code>{
    "compileOnSave": false,
    "compilerOptions": {
      "declaration": false,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "module": "commonjs",
      "moduleResolution": "node",
      "noEmitOnError": true,
      "noImplicitAny": false,
      "outDir": "../dist/",
      "rootDir": ".",
      "sourceMap": true,
      "target": "es6",
      "inlineSources": true
    },
    "exclude": [
      "node_modules",
      "typings",
      "typings/main",
      "typings/main.d.ts"
  
    ]
  }
  </code></pre>