Angular 2和Eclipse-无法加载资源:服务器响应状态为404 [英] Angular 2 and Eclipse - Failed to load resource: the server responded with a status of 404
问题描述
所以我在用角度2显示第一个组件时遇到问题.我遵循了这个在Angular网站上找到 使我的第一个组件工作.我在控制台中没有收到任何错误或其他信息，但在浏览器中确实看到了加载中的....有人知道我做错了吗?
So I am having an issue with displaying my first component in angular 2. I followed this post to setup typescript. I followed the 5 min quick start guide here on Angular website to get my first component working. I don't get an error or anything in the console but I do see loading.... in the browser. Does anyone know what I did wrong?
package.json文件
package.json file
{
"name": "budget_calculator",
"version": "1.0.0",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.10",
"bootstrap": "^3.3.6"
}
}
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { Navigation } from './components/nav.component';
bootstrap(Navigation);
nav.component.ts
nav.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>Angular 2 is present</h1>'
})
export class Navigation {
}
index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Load libraries for Angular 2-->
<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>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('./app/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<header>
<my-app>
Loading.....
</my-app>
</header>
</body>
</html>
项目结构
node
node_modules
src
-> main
-> webapp
-> node_modules
-> app
-> components
- nav.component.js.map
- nav.component.d.ts
- nav.component.ts
- nav.component.js
- main.d.ts
- main.js
- main.js.map
- main.ts
- index.html
JavaScript控制台错误
Javascript console error
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (app, line 0)
[Error] Error: invoke@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:323:34
runGuarded@http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:230:54
http://localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:206:40
Error loading http://localhost:8080/BudgetCalculator/app
(anonymous function) (index.html:19)
invoke (zone.js:323)
run (zone.js:216)
(anonymous function) (zone.js:571)
invokeTask (zone.js:356)
runTask (zone.js:256)
drainMicroTaskQueue (zone.js:474)
g (shim.min.js:8:10178)
(anonymous function) (shim.min.js:8:10300)
k (shim.min.js:8:14323)
推荐答案
您需要使用systemjs映射包@angular/core，@angular/common ...等.否则，它将如何知道在哪里找到它们?
You need to map your packages @angular/core,@angular/common... etc using systemjs. Otherwise, how would it know where to find them?
创建一个名为systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);
然后，在您的index.html中，导入您创建的文件:
Then, in your index.html, import the file you created:
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
请注意，您应该从index.html
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
上面的代码摘自最底部的 angular2快速入门页页面的内容.
The code above is taken from angular2 quick start page at the very bottom of the page.
这篇关于Angular 2和Eclipse-无法加载资源:服务器响应状态为404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
