2017-03-01 12 views
1

私はAngualr2を使うと答え、私はここに従うHello World! in Angular 2 using Visual Studio 2015 and ASP.NET 4をだが、エラーが表示されます。Angular2は、リソースの読み込みに失敗しました:サーバーは、Visual Studio 2015</p> <p>で(見つかりません)404の状態


エラーメッセージ

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

私を助けてください。

答えて

4

あなたは(あなた.TSファイルに\ appフォルダにあると仮定し)あなたのsystemjs.config.jsファイルに基づいてapp/main.jsないsrc/main.jsを指定する必要があります。

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

は、返信いただきありがとうございます。私のフォルダそのもの[クイックスタート](https://github.com/angular/quickstart)ですので、 'main.ts'は' src'フォルダにあります。 –

+0

あなたのマップの 'app: 'app''を' app:' src''に変更してください。 – pixelbits

+0

あなたは正しいです。それは動作します、ありがとうございます。 –

関連する問題