下载AngularJS Node应用程序，而不是在Internet Explorer中加载 [英] AngularJS Node app downloads instead of loading in Internet Explorer
问题描述
每当我尝试通过http://localhost:3000加载AngularJS网页(在节点JS + Express服务器上)时，Internet Explorer都会尝试使用随机名称且没有文件扩展名下载，而不显示实际页面.
Whenever I try loading my AngularJS webpage (on a node js + express server) through http://localhost:3000, Internet Explorer just tries to download it with a random name and no file extension, instead of showing the actual page.
我什至无法检查控制台是否有错误，因为下载尝试似乎是在尝试将其加载为网页之前开始的.
I can't even check the console for errors, because the download attempt seems to start before even trying to load it as a webpage.
该网站可在Firefox和Chrome上完美运行.我正在使用Internet Explorer 11 ，因此它甚至不是旧版本.
The website works perfectly on both Firefox and Chrome. I am using Internet Explorer 11, so it's not even an old version.
我尝试通过 W3验证程序运行索引，并且它指出了DOM中的唯一错误是Angular指令和标记(并不是真正的错误).
I tried running my index through the W3 Validator, and the only errors it points out in the DOM are the Angular directives and tags (which are not really errors).
我尝试将DOCTYPE从一个简单的<!DOCTYPE html>更改为此:
I tried changing the DOCTYPE from just a simple <!DOCTYPE html> to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
这:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...以及这个:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
无效.
正如其他问题所建议的那样，我还尝试在节点服务器中以文本/纯文本"而不是文本/html"提供页面，但这也无济于事.
As suggested in other questions, I also tried serving my page as "text/plain" rather than "text/html" in my node server, but that didn't help either.
这是我的索引的html:
Here's the html for my index:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<!-- Angular Material CSS now available via Google CDN; version 1.0.7 used here -->
<link rel="stylesheet" href="./modules/angular-material/angular-material.min.css"/>
<link rel="stylesheet" href="./css/style.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="icon" href="icons/favicon.ico" type="image/x-icon"/>
<base href="/"/>
<title>Area Clienti</title>
<script src="./modules/angular/angular.js" type="text/javascript"></script>
<script src="./modules/ngstorage/ngStorage.js" type="text/javascript"></script>
<script src="./modules/angular-aria/angular-aria.min.js" type="text/javascript"></script>
<script src="./modules/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="./modules/angular-material/angular-material.min.js" type="text/javascript"></script>
<script src="./modules/angular-ui-router/release/angular-ui-router.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.core.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.dsr.min.js" type="text/javascript"></script>
<script src="./modules/ui-router-extras/release/modular/ct-ui-router-extras.sticky.min.js" type="text/javascript"></script>
<script src="./modules/pdfmake/build/pdfmake.min.js" type="text/javascript"></script>
<script src="./modules/pdfmake/build/vfs_fonts.js" type="text/javascript"></script>
<script src="./modules/angular-messages/angular-messages.min.js" type="text/javascript"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js" type="text/javascript"></script>
<script src="./js/client.js" type="text/javascript"></script>
</head>
<body ng-app="App" ng-controller="AppCtrl" ng-view ui-view ng-cloak layout="row">
</body>
</html>
以前，脚本标签位于主体中，我尝试将它们放在头部以查看是否有帮助，但这没有.
The script tags were in the body before, I tried putting them in the head to see if that would have helped, but it didn't.
这里可能是什么问题?为什么在IE上使内容正常工作如此痛苦?
What might be the issue here? And why is it so painful to make stuff work on IE?
这是服务器代码.
var express = require("express");
var fs = require('fs');
var xml2js = require("./node_modules/xml2js");
var auth = require("./authenticator.js");
var bodyParser = require('body-parser');
var app=express();
//app.use(express.static('pages'));
var server = app.listen(3000, function(){
var host = server.address().address;
var port = server.address().port;
});
var jsonParser = bodyParser.json(); // to support JSON-encoded bodies
var urlencodedParser = bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
});
app.get('/', function(req, res){
sendFile(res, './index.html', getHeader('text/plain'));
});
app.use('/font/', express.static('./font/'));
app.use('/modules/', express.static('./node_modules/'));
app.use('/css/', express.static('./css/'));
app.use('/views/', express.static('./views/'));
app.use('/img/', express.static('./img/'));
app.use('/js/', express.static('./js/'));
function sendFile(res, path, header){
fs.readFile(path, function(err, content){
if(err) {
console.log("\nErrore caricando " + path + " - err: " + err);
//pageNotFound(res, "error");
}
else sendToClient(content, res, 200, header);
});
}
function getHeader(type){
return {"Content-Type": type};
}
function sendToClient(data, res, code, type){
res.writeHead(code, getHeader(type));
(type === "text/html" || type === "text") ? res.end(data, "utf-8") : res.end(data);
}
再加上一堆我认为不相关的其他POST和GET服务
Plus a bunch of other POST and GET services which I think are not relevant
更新:我设法在开发者控制台中说了些什么.这是错误:
UPDATE: I managed to get it to say something in the developer console. This is the error:
(翻译:无法打开 http://localhost:3000/) 它仍然尝试下载页面.
(translation: impossible to open http://localhost:3000/) It still tries to download the page.
更新2 :
我设法找出问题所在:由于某种原因，Content-Type标头内容被解释为对象，而不是实际的字符串，因此IE无法呈现页面.
I managed to find out what the issue was: for some reason, the Content-Type header content was being interpreted as an object rather than the string it actually was, so IE couldn't render the page.
它现在呈现索引，但是Angular-UI-Router似乎不起作用.
It now renders the index, but Angular-UI-Router doesn't seem to work.
看来ui-router无法加载子状态(不过，由于我能够登录并转移到其他状态的仪表板页面，因此它可以在正常状态之间切换)
It appears as though ui-router can't load sub states (it can switch between normal states though, since I was able to log in and be transferred to my dashboard page, which is a different state)
(Chrome和Firefox上的所有功能仍然可以正常运行)
(Everything is still working perfectly fine on Chrome and Firefox)
推荐答案
尝试使用Express的use()始终通过 sendFile()使用*通配符执行 any HTTP操作后的index.html.确保此操作之后在其他任何API REST路由或类似路由之后.这有助于确保index.html中的Angular应用不会被呈现的其他页面不断地重新加载.这样，任何其他API路由都会发送/接收您需要的数据，并且只有在没有其他匹配条件的情况下，才会加载index.html.以下是适用于Express + Angular 2应用程序的结构.
Try using Express's use() to always send via sendFile() the index.html after any HTTP action using the * wildcard. Make sure this goes after any other API REST routes or similar. This helps ensure that the Angular app within index.html is not constantly reloaded by other pages being rendered. This way any other API routes send/receive the data you need and only if nothing else is matched, will the index.html be loaded. Below is a structure that worked for me for an Express + Angular 2 application.
文件结构:
api
foo
foo.js
bar
bar.js
public
fonts
css
img
index.html
server.js
服务器JS:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
// fonts, css, images are stored in respective folders within folder "public"
app.use(express.static(path.join(__dirname, 'public')));
// some RESTful endpoints
app.use('/api/foo', fooRoutes);
app.use('/api/bar', barRoutes);
app.use('*', (req, res) => res.sendFile(path.join(__dirname, 'public', 'index.html')));
// error handling middleware
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
这篇关于下载AngularJS Node应用程序，而不是在Internet Explorer中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
