Question

我正在开始一个使用Angular 4进行前端设计的新项目，应用程序需要一些休息api，我决定使用node。我正在使用angular cli创建角度应用程序，我知道如何创建角度应用程序和节点服务器，但我想知道如何连接这两个东西，以便当我ng serve时，服务器和角度应用程序都被编译并运行。需要对项目结构或某些文件进行哪些基本更改？

Answer 1

我目前正在构建一个带有Node / Express后端的全栈Angular应用程序，并且想知道完全相同的事情。然而，尽管scotch.io教程告诉你，在同一目录中创建Express服务器和Angular应用程序并不是最好的方法。

您要做的是在一个项目中设置Express服务器并在一个终端窗口中提供服务，然后在单独的终端窗口中提供Angular应用程序，但要指向本地运行的Express服务器而不是默认服务器Angular CLI（ng-serve命令）附带的开发服务器。

这是一个Stack Overflow answer和一个Medium article，它回答了我关于如何设置它的所有问题（幸运的是，它并不太难）。

Answer 2

这就是我做Shubham的事情。我进入Angular-Cli，将“ outDir”：更改为“ ../public”，换句话说，它看起来像"outDir": "../public"。 ../public文件夹是在我的app.js文件中使用app.use(express.static(path.join(__dirname, 'public')));

设置的Express静态文件夹。

请记住，我已经全局安装了nodemon，并且在我的package.json文件中，"start": "node app"只是从该目录运行nodemon来启动服务器，而Angular和Express都在同一服务器上运行。

我已经看到有人说在Node / Express服务器上运行静态文件是不好的，但是对于开发我不确定这是否重要。尽管我是js框架等方面的新手，但这是我在github acct上的项目文件：https://github.com/chriskavanagh/angularauth。

编辑：更改代码时必须运行ng-build（在Angular目录中）。

Answer 3

首先，在 Angular 项目中做 ng build，它会创建 dist 文件夹（静态文件夹）。第二步，将以下代码粘贴到后端服务器入口点文件中。

app.use(express.static(path.join(__dirname, 'dist/')));
app.get('*', (req, res) =>{
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

以上事情完成后运行后端服务器：node filename

注意：给出您的 index.html 文件在 dist 文件夹中的正确路径。

Answer 4

节点服务器和Angular应用程序是两回事。要运行节点服务器，您应该使用以下命令：

节点ServerName.js

要运行角度应用程序，您应该使用命令：

npm start OR ng serve

在您的情况下，两者之间的连接是由http请求进行的。例如，您可以使用＆＃39;表达＆＃39;为了在您的节点服务器中实现休息服务，然后在当前路由中向服务器发送http请求。

在一个命令中提供Node Server和Angular 4应用程序

4 个答案: