如何在 Node 服务器上运行 Angular 应用？

Question

我希望在Node服务器上使用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!')
})

但是当我试图在本地主机上查看我的网站时，什么也没有出现。你能帮我吗？

- M.Hol

---

(1) 如果在 res.sendFile(path.resolve('dist/my-app/index.html')) 处出现任何错误... (2) 当你在浏览器中输入 localhost:[80]/ 时，你看到了什么？ (3) 尝试将你的 app.listen 的端口从 80 改为 8080。 - Akber Iqbal

Answer 1

希望这可以帮到你。

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

- Carlos Vallejo

---

你好，我有类似的设置。当我访问 http://localhost:3000 时，页面可以正确加载。但是当我尝试访问 http://localhost:3000/login 时，页面没有 CSS 样式。浏览器控制台显示以下错误 - 内容安全策略：该页面的设置阻止了内联资源（“script-src”）的加载。 - iamcrypticcoder

Answer 2

我找到了一个解决方案！

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);

- M.Hol

Answer 3

你可以只需几个步骤完成此操作...

1). 运行 ng build --prod (如果出现预算错误，请根据错误在 angular.json 文件中增加预算)

2). 在上述命令之后，将生成一个包含项目文件夹的 dist 文件夹。将这个位于 angular 项目内的项目文件夹移动到你的 node 项目中，比如说 public 文件夹内 (public/your_build_angular_project)。

3). 现在，在你的 node 主文件中，比如 index.js 或 app.js，加入以下代码。

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

4). 现在启动你的节点服务器，当你访问它时，你将得到你的Angular项目运行

希望这能帮助你或其他人！谢谢。

- Aman Kumar Gupta

Answer 4

样例AngularJS应用程序的目录在这里：

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

在 Angular 应用的 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 文件后，运行命令 'npm install'。

运行命令 'npm start'。打开浏览器并访问 localhost:8080/。

- Gayathri_Siva