Angular2 Failed to load resource: the server responded with a status of 404 (Not Found)

Question

I use Angualr2 at Visual Studio 2015.

I follow Here's Hello World! in Angular 2 using Visual Studio 2015 and ASP.NET 4 , but appear error.

---

Error Message

Error: (SystemJS) XHR error (404 Not Found) loading     
`http://localhost:2088/src/app/app.module` Error: XHR error (404 Not Found) 
loading `http://localhost:2088/src/app/app.module` at XMLHttpRequest.wrapFn [as _onreadystatechange] 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:1190:29`) [<root>] at Zone.runTask 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:166:47`) [<root> => <root>] at XMLHttpRequest.ZoneTask.invoke 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:416:38`) [<root>] 
Error loading `http://localhost:2088/src/app/app.module` as 
"./app/app.module" from `http://localhost:2088/src/main.js` at XMLHttpRequest.wrapFn [as _onreadystatechange] 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:1190:29`) [<root>] at Zone.runTask 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:166:47`) [<root> => <root>] at XMLHttpRequest.ZoneTask.invoke 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:416:38`) [<root>] 
Error loading `http://localhost:2088/src/app/app.module` as "./app/app.module" from `http://localhost:2088/src/main.js` at addToError 
(`http://localhost:2088/node_modules/systemjs/dist/system.src.js:122:78`) [<root>] at linkSetFailed 
(`http://localhost:2088/node_modules/systemjs/dist/system.src.js:695:21`) [<root>] at 
`http://localhost:2088/node_modules/systemjs/dist/system.src.js:495:9` [<root>] at Zone.run 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:126:43`) [<root> => <root>] at `http://localhost:2088/node_modules/zone.js/dist/zone.js:679:57` [<root>] at Zone.runTask 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:166:47`) [<root> => <root>] at drainMicroTaskQueue 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:529:35`) [<root>] at XMLHttpRequest.ZoneTask.invoke 
(`http://localhost:2088/node_modules/zone.js/dist/zone.js:420:25`) [<root>]

systemjs.config.js

(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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  }
}
});
})(this);

_Layout.cshtml

<!-- Angular2 Code -->
<base href="/">
<link rel="stylesheet" href="~/src/styles.css">
<!-- 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/systemjs/dist/system.src.js"></script>
<script src="~/src/systemjs.config.js"></script>
<script>
  System.import('src/main.js').catch(function(err){ console.error(err); });
</script>
<!-- Angular2 Code -->

main.ts

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

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Please help me.

Answer 1

You should specify app/main.js not src/main.js based on your systemjs.config.js file (assumes your .ts files are in \\app folder):

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

Answer 2

Thank you so much for this. I struggled to sort it out. I have two dist files one in the .net core under wwwroot and one under app . That was causing the confusion.

Updated the webpack.config.js file to below and my page loads again.

output: {
  filename: '[name].js',
  publicPath: 'app/dist/'
},