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

2
votes

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.

2
angular

2 Answers

4
votes

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>
0
votes

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