Error: XHR error (404 Not Found) loading http://localhost:3622/app.js(…) + angular 2

Question

I am trying to build an angular 2 application using typescript in visual studio 2015 application. I am using angular release candidate 1.

I am getting the following error message in the console of my browser while running the application.

index.html:24 Error: Error: XHR error (404 Not Found) loading http://localhost:3622/app.js(…)

I cannot understand why it is trying to look for app.js file. I have set index.html as the start page.

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

Please find my folder structure

Index.html

<!DOCTYPE html>
<html>

<head>
    <title>Angular 2 Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>


    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/primeui/primeui-ng-all.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>

</head>

<body>
    <my-app>Loading..</my-app>
</body>

</html>

Systemjs.config.js

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

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';

// Our main component
import { AppComponent } from './app/app.component';


bootstrap(AppComponent, []).catch(err => console.error(err));

app.component.ts

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: `
    <div>
        <h1>{{pageTitle}}</h1>
          <rm-risks> </rm-risks> 
     </div>
     ` ,
    directives: [RiskListComponent, DataTable, Column]

})

export class AppComponent {
    pageTitle: string = 'Test UK Trader'; 
}

risk-list.component.ts

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"
        }
    ];
}

risk-list.component.html

<h3 class="first">{{pageTitle}}</h3>

<p-dataTable [value]="risks" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">
    <p-column field="reference" header="Reference"></p-column>
    <p-column field="insuredName" header="Insured Name"></p-column>
    <p-column field="inceptionDate" header="Inception Date"></p-column>
    <p-column field="riskType" header="Risk Type"></p-column>
    <p-column field="status" header="Status"></p-column>
    <p-column field="grossPremium" header="Gross Premium"></p-column>
    <p-column field="allocatedTo" header="Allocated To"></p-column>
    <p-column field="allocatedCompany" header="Allocated Company"></p-column>
</p-dataTable>

tsconfig.js

{
  "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"

  ]
}

Can you post your tsconfig.json, too? But without seeing it I would say you should do System.import('main').catch(function (err) { console.error(err); }); in your index.html. (instead of importing 'app') — Maximilian Riegler
– Maximilian Riegler, Commented May 25, 2016 at 11:29
If i put main in the system.import , i get a message saying Error: Error: XHR error (404 Not Found) loading localhost:3622/main.js(…) — Tom
– Tom, Commented May 25, 2016 at 11:34
Your outDir is set to ../dist/, that means it's outside the scope/root of your liteserver. — Maximilian Riegler
– Maximilian Riegler, Commented May 25, 2016 at 11:35

Thierry Templier · Accepted Answer · 2016-05-25 11:34:33Z

3

I would move the main.ts file under the app folder and import it this way:

<script>
  System.import('app/main').catch(function (err) { console.error(err); });
</script>

You also need to have this configuration for SystemJS:

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
};

answered May 25, 2016 at 11:34

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Maximilian Riegler Over a year ago

He is also using outDir in his tsconfig.json.

Tom Over a year ago

I get the following error localhost:3622/app/main.js Failed to load resource: the server responded with a status of 404 (Not Found) index.html:24 Error: Error: XHR error (404 Not Found) loading localhost:3622/app/main.js(…)(anonymous function) @ index.html:24

Tom Over a year ago

I can see only main.ts and main.js.map files under the app folder

Tom Over a year ago

The above proposed solution still doesnt solve my problem

Tom Over a year ago

I copied all the js files from the outdir to the application directories and now have the following error Error: Error: XHR error (404 Not Found) loading localhost:3622/node_modules/primeng/primeng(…)

|

Collectives™ on Stack Overflow

Error: XHR error (404 Not Found) loading http://localhost:3622/app.js(…) + angular 2

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related