如何在节点服务器上运行 Angular 应用程序？答案

【问题标题】：How to run an Angular app on a Node server?如何在节点服务器上运行 Angular 应用程序？
【发布时间】：2019-10-04 11:49:27
【问题描述】：

您好，我想在节点服务器上使用express 运行我的应用程序。

我的 server.js ：

var express = require('express');
var path = require('path');

var app = express();

app.get('/', (req, res) => {
   res.sendFile(path.resolve('dist/my-app/index.html'))
});

app.listen(80, () => {
  console.log('Server started!')
})

但是当我试图在localhost 上查看我的网站时。什么都没有出现。你能帮帮我吗？

【问题讨论】：

(1) 您在res.sendFile(path.resolve('dist/my-app/index.html')) 处收到任何错误... (2) 当您在浏览器中执行localhost:[80]/ 时，您看到了什么？ (3) 尝试将您的 app.listen 的端口更改为 8080 而不是 80

标签： node.js angular express

【解决方案1】：

示例 angularjs 应用程序目录在这里：

AngularApp->myApp->
AngularApp->myApp->controllers
AngularApp->myApp->views
AngularApp->myApp->services
AngularApp->myApp->app.js
AngularApp->myApp->index.html

创建一个 package.json 文件并在其中插入以下代码：

（位置：AngularApp->package.json）

    {
   "name": "myApp",
   "version": "0.0.1",
   "description": "My Project",
   "dependencies": {
        "express": "*"
    },
   "engine": "node >=0.6.x",
   "scripts": {
         "start": "node server.js"
    },
   "main": "server.js",
   "repository": {
        "type": "git",
        "url": ""
    },
   "author": "myApp",
   "license": "myApp",
   "bugs": {
        "url": ""
    },
   "homepage": "/"
}

创建 server.js：（位置：AngularApp->server.js）

var express = require('express');
var app = express();
app.use(express.static("myApp")); // myApp will be the same folder name.
app.get('/', function (req, res,next) {
 res.redirect('/'); 
});
app.listen(8080, 'localhost');
console.log("MyProject Server is Listening on port 8080");

导航到 package.json 文件后运行 commnad 'npm install'。

运行命令“npm start”。打开浏览器并点击 localhost:8080/

【讨论】：

【解决方案2】：

您只需几个步骤即可完成此操作...

1)。运行 ng build --prod （如果你得到预算错误而不是根据错误增加 angular.json 文件中的预算）

2)。执行上述命令后，将生成一个包含您的项目文件夹的 dist 文件夹，将 dist 文件夹中的项目文件夹从 angular 项目移动到您的节点项目中，例如在公共文件夹 (public/your_build_angular_project) 中。

3)。现在在你的节点主文件中说 index.js 或 app.js，包括这些行

const path = require('path');
app.use('/', express.static(path.join(__dirname, 'public/your_build_angular_project')));

4)。现在为您的节点服务器服务，然后当您点击它时，您将运行您的 Angular 项目

希望这会对您或其他人有所帮助！谢谢。

【讨论】：

【解决方案3】：

希望这会对你有所帮助。

1) 运行：

ng build --prod

这将创建一个 dist 文件夹。用于生产。

2) 运行：

npm install --save express

安装express并将其保存为项目中的依赖项。

3) 在根目录下创建文件：./server.js

4) 复制此代码。不要忘记用你的名字项目修改

const express = require('express');
const http = require('http');
const path = require('path');

const app = express();

const port = process.env.PORT || 3001;

app.use(express.static(__dirname + '/dist/my-app-name'));

app.get('/*', (req, res) => res.sendFile(path.join(__dirname)));

const server = http.createServer(app);

server.listen(port, () => console.log(`App running on: http://localhost:${port}`));

5) 运行 server.js 文件

node server.js

【讨论】：

【解决方案4】：

我找到了解决办法！

const express = require('express');
const app = express();
const path = require('path');
const fs = require('fs');

const port = process.env.NODE_PORT || 3000;

const root = path.join(__dirname, 'dist', 'my-app');


app.get('*' ,function(req, res) {
  fs.stat(root + req.path, function(err){
    if(err){
        res.sendFile("index.html", { root });
    }else{
        res.sendFile(req.path, { root });
    }
  })
});

app.listen(port);
console.log('Listening on port '+ port);

【讨论】：