如何在4200端口同时运行angular 4 app和nodejs api进行生产和开发？

Question

我已经创建了angular 4应用程序，我可以使用ng serve --open运行它，它可以在localhost:4200上运行，我想要的是我还在同一个angular项目中使用nodejs创建了应用程序接口，现在我想在localhost:4200/api上运行该应用程序接口，所以我尝试了如下所示

我的angular 4和nodejs结构如下所示

/dist
/server
  /routes
  /server
/src
app.js
package.json

在app.js中，我使用了

app.use(express.static(path.join(__dirname, 'dist')));
app.use('/app/api', apiRoutes);
const port = process.env.PORT || '3000';
server.listen(port, () => console.log(`API running on localhost:${port}`));

一旦我使用nodemon app.js和go在localhost:3000上运行它运行我的angular应用程序，它就很好，而且我在localhost:3000/app/api上运行它也很好，

但是，当我在angular应用程序中更改时，它不会自动刷新我的应用程序，因为它当前正在运行节点应用程序。要刷新它，我需要运行ng build，然后它会影响我在angular应用程序上的新更改

所以，我想要的是运行ng serve --open，它将运行angular应用程序，但不会运行node js api，所以我想同时运行这两个应用程序，一旦我从angular应用程序或node js应用程序中更改了任何内容，它必须自动刷新。

Answer 1

您不能让两个不同的应用程序在同一端口上运行。当您运行ng serve时，Angular-cli在幕后使用nodejs服务器(从技术上讲，它是nodejs-dev- server )，这意味着端口已经在使用中。

有两种可能的解决方案。

1. 使用您的节点应用程序来提供静态前端文件。那么你就不能真正使用ng serve (这可能是你在运行live时要做的事情)。
2. 使用具有不同端口的nodejs，并使用Angular的代理配置，让Angular认为api端口实际上是4200 (这在开发期间可能是最好的)。

我认为这主要是开发过程中的一个问题，因为你很可能不会(也不应该)使用ng serve live，所以我最好的建议是选项2。

要配置代理，您需要在您的angular应用程序根目录中创建一个名为proxy.config.json的文件，其中包含以下内容：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

然后，当您运行ng serve时，您可以使用ng serve --proxy-config proxy.config.json来运行它。

Here's a link to the documentation

在为生产环境构建时，有一个替代方案(上面的解决方案1)：

要在生产环境中构建，您可以使用ng build --prod到create a production ready Angular build，然后(假设您在节点服务器上使用Express )，使用Express documentation中解释的类似app.use(express.static('dist/'))的内容。我自己没有使用node (我使用的是.NET核心)，所以恐怕我不能提供更多的细节。

Answer 2

Daniel Kagan在medium上有一个很棒的博客，它解释了所有的一切，这里有链接。Hot deploy关于客户端热部署的解释，我添加了更多的代码来进行客户端和服务器端的热部署。

此答案仅适用于开发热重新加载

第一步。

安装concurrently和nodemon

npm i并发

npm i nodemon

您也可以使用-g标志进行全局安装

第二步。

打开您的服务器的package.json文件，并添加以下四行。备注我的angular代码放在client文件夹中，所以我做了cd client

"buildclient": "cd client && ng build",
"runclient": "cd client && npm start",
"devstart": "nodemon --inspect ./bin/www",
"dev": "npm run buildclient & concurrently --kill-others \"npm run runclient\" \"npm run devstart\""

如果您不想检查节点应用程序，则删除--inspect标志。

第三步。

转到您的angular文件夹并创建文件proxy.conf.json将以下行添加到文件中。

 {
   "/api/*": {
   "target": "http://localhost:3000",
   "secure": false,
   "changeOrigin": true
 }
 }

第四步。

在angular的package.json文件中添加以下命令

"start": "ng serve --proxy-config proxy.conf.json"

第五步。

在服务器的公共文件夹中创建angular build输出目录。为此，请转到angular.json，将build outputPath更改为../public，下面是JSON代码片段。

"options": {
        "outputPath": "../public",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": []
      },

第六步。

确保您节点express服务器app.js文件从公用文件夹中读取静态文件。

app.use(express.static(path.join(__dirname, 'public')));

步骤七.

npm运行开发

完成后，转到http://localhost:4200，你可以在那里看到你的应用程序:)所有对/api的调用都将到达node express服务器。

对服务器或客户端的任何更改都将自动热部署。

注意，我使用Express application generator创建我的服务器，使用Angular CLI创建angular应用程序。如果使用其他方式，则可能不会显示某些文件

Answer 3

1.首先构建angular 6应用程序，运行ng build --watch

2.在nodejs应用程序中，将此中间件app.use(express.static(path.join(__dirname, './client/dist/client')));编写为指向client/dist/client的文件夹是angular 6应用程序的build文件夹。

然后运行nodemon --检查app.js

确保有一个这样的文件夹层次结构

/myproject /client /dist /client /.... /index.html /app.js /.....

监听要从app.js运行的端口，然后运行localhost:portno

希望这能有所帮助