Question

我在Visual Studio 2015中使用Angualr2。

我按照此处Hello World! in Angular 2 using Visual Studio 2015 and ASP.NET 4进行操作，但显示错误。

错误消息

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

请帮帮我。

Answer 1

您应该根据您的systemjs.config.js文件指定app/main.js而不是src/main.js（假设您的.ts文件位于\ app文件夹中）：

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

Answer 2

非常感谢您。我努力解决它。我在.net核心的wwwroot下有两个dist文件，在app下的有一个dist文件。这引起了混乱。

将webpack.config.js文件更新到下面，并且我的页面再次加载。

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

Angular2无法加载资源：服务器响应状态为404（未找到）

2 个答案: