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

时间:2018-04-01 11:26:39

标签: node.js angular server angular-cli

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

4 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

这就是我做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目录中)。

答案 2 :(得分:0)

首先,在 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 文件夹中的正确路径。

答案 3 :(得分:-1)

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

  

节点ServerName.js

要运行角度应用程序,您应该使用命令:

  

npm start OR ng serve

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