[英]MEAN: NodeJS serving Angular node_modules returns index.html
NodeJS https server running an api, cms and angular app. 运行api,cms和angular应用程序的NodeJS https服务器。 When I start the server on my local machine (macOS Sierra) using nodemon everything works fine.
当我使用nodemon在本地计算机(macOS Sierra)上启动服务器时,一切正常。 When I try to do the same on my VPS everything fails.
当我尝试在VPS上执行相同操作时,一切都会失败。 Some details about the VPS: it uses NGINX as a proxy server and pm2 as the cluster manager, and letsencrypt for ssl.
有关VPS的一些详细信息:它使用NGINX作为代理服务器,使用pm2作为集群管理器,并使用letencrypt for ssl。
Even by allowing the direct port of the node server in the firewall, to bypass NGINX, the angular frontend and CMS don't load correctly. 即使允许防火墙中节点服务器的直接端口绕过NGINX,也无法正确加载角度前端和CMS。 Switching from pm2 to nodemon changes nothing.
从pm2切换到nodemon并没有任何改变。
Using the console I get this error message for every dependency needed from the public node_modules: 使用控制台,对于公共node_modules所需的每个依赖项,我都会收到以下错误消息:
Refused to execute script from 'https://mydomain/node_modules/jquery/dist/jquery.min.js' because
its MIME type ('text/html') is not executable, and strict MIME typechecking is enabled.
When we see what is actually returned its the index.html from angular instead of the requested package. 当我们看到实际返回的内容是来自angular的index.html而不是所请求的包。 For testing purposes I allowed the following
出于测试目的,我允许以下操作
app.use('/node_modules', express.static(__dirname + '/node_modules'));
//With a copy of jquery and bootstrap
and the CMS loaded correctly but the angular front-end doesn't. 并且CMS正确加载,但前端没有倾斜。 But it also exposes the server dependencies.
但这也暴露了服务器依赖性。 Could you maybe help me spot my mistake?
您能帮我发现我的错误吗?
The api is a simple REST API communicating with the MongoDB using some services. api是使用某些服务与MongoDB通信的简单REST API。 The CMS is served by Node using the ejs view engine
CMS由Node使用ejs视图引擎提供服务
//APP.JS
let cms = require('./routes/cms'); //An Express Router
let api = require('./routes/api');//An Express Router
//The modules containing angular, jquery and bootstrap for the Angular front end and the cms
//We separated the dependencies for the backend and frontend as a security measure
app.use('/node_modules', express.static(__dirname + '/public/node_modules'));
app.use('/api', api); //Server the api
app.use('/cms', cms); //Serve the cms
//The problem is probably here
app.use('/', express.static(__dirname + '/public')); //Route to the angular frontend
app.get('/*', function(req, res){ //Support for html5Mode in Angular
res.sendFile(path.join(__dirname + '/public/index.html'));
});
// catch 404 and forward to error handler
app.use(function (req, res, next) {
let err = new Error('Not Found\t' + req.header('Referer'));
err.status = 404;
next(err);
});
//Server.JS
let options = {
key: fs.readFileSync('certs/privatekey.pem'),
cert: fs.readFileSync('certs/certificate.pem')
};
let server = https.createServer(options,app);
//Angular Frontend index.html
<head>
<!— … —>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/animate.css/animate.min.css">
<link rel="stylesheet" href="node_modules/ng-dialog/css/ngDialog.min.css">
<link rel="stylesheet" href="node_modules/ng-dialog/css/ngDialog-theme-default.min.css">
<link rel="stylesheet" href="node_modules/angular-moment-picker/dist/angular-moment-picker.css">
<link rel="stylesheet" href="node_modules/angular-tooltips/dist/angular-tooltips.min.css">
<link rel="stylesheet" href="dist/css/site.css">
<!— … —>
</head>
//The tree
├── api.md //Some doc
├── app.js
├── bin //Contains server.js
├── certs
├── config
├── coverage
├── data
├── database //Link with the database
├── errors
├── helpers
├── logs
├── minigames
├── node_modules //The dependencies for the server
├── package.json //The package for the server
├── public
│ ├── app //The controllers for the Angular app
│ ├── app.js
│ ├── assets
│ ├── dist
│ ├── img
│ ├── index.html //Entry point for the Angular app
│ ├── karma.config.js
│ ├── node_modules //The node_modules for the Angular app
│ ├── npm-debug.log
│ ├── package.json //The package for the Angular app
│ ├── scss
│ ├── stylesheets
│ ├── superstatic.json
│ ├── tests
│ └── views
├── routes //Contains the routes for the Api and the CMS
├── services
├── test
├── tools
└── views //The views for the CMS
It seems public/node_modules is empty. 似乎public / node_modules为空。 npm install seemed to work as it didn't throw an error, but it failed somewhere.
npm install似乎可以正常工作,因为它没有引发错误,但是在某处失败。 Copying the node_modules over sftp resolved my issue.
通过sftp复制node_modules解决了我的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.