简体   繁体   English

平均值:服务于Angular node_modules的NodeJS返回index.html

[英]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.

相关问题 无法读取“ /usr/local/lib/node_modules/generator-angular-cordova/templates/common/index.html”文件(错误代码:ENOENT) - Unable to read “/usr/local/lib/node_modules/generator-angular-cordova/templates/common/index.html” file (Error code: ENOENT) 为什么“ /”在node.js中不提供index.html? - Why isn't “/” serving index.html in node.js? 角4个node_modules - Angular 4 node_modules 为什么在浏览器中打开index.html而不是通过节点服务器提供index.html时,“ this”有何不同? - Why is `this` different when opening index.html in the browser as opposed to serving index.html with a node server? 为 Angular 项目的 index.html 文件提供服务的 Python (Flask) - Python (Flask) serving Angular project's index.html file ExpressJs不提供index.html - ExpressJs is not serving index.html NodeJS Express API 仅返回 index.html 生产文件? - NodeJS Express API only returns index.html file on production? Heroku 中的 React/Node 应用程序,在服务器运行的情况下提供 index.html/index.js - React/Node app in Heroku, serving index.html/index.js with server running 我的node.js服务器脚本可以很好地使用index.html,但不能提供CSS或其他静态文件 - My node.js server script is serving the index.html fine, but not the CSS or other static files Angular 2导入node_modules未添加到构建 - Angular 2 importing node_modules not adding to build
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM