错误:正在加载http://localhost:3622/app.js(…)+ angular 2的XHR错误(找不到404) [英] Error: XHR error (404 Not Found) loading http://localhost:3622/app.js(…) + angular 2
问题描述
我正在尝试在Visual Studio 2015应用程序中使用打字稿来构建angular 2应用程序.我正在使用角度释放候选1.
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错误:错误:XHR错误(找不到404)正在加载 http://localhost: 3622/app.js (…)
index.html:24 Error: Error: XHR error (404 Not Found) loading http://localhost:3622/app.js(…)
我不明白为什么它要寻找app.js文件.我已将index.html设置为起始页面.
I cannot understand why it is trying to look for app.js file. I have set index.html as the start page.
如下面的代码所示，我试图在数据表中显示数据.我如何设置systemjs.js文件或index.html文件中的system.import语句有任何问题
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
请找到我的文件夹结构
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"
]
}
推荐答案
我将main.ts文件移动到app文件夹下，并通过以下方式导入它:
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>
您还需要对SystemJS进行以下配置:
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' },
};
这篇关于错误:正在加载http://localhost:3622/app.js(…)+ angular 2的XHR错误(找不到404)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
