Question

我正在学习MEAN堆栈或PEAN堆栈（Postgres）。在线上有很多有用的教程可以入门，但是仍然有些不适。

从我收集到的信息来看，有多种方法可以解决此问题。我看到了一些教程，这些教程可以启动Node项目，在客户端文件夹或任何命名约定中添加Express，Angular等。然后还有其他以Angular项目开头的教程

ng new client

，然后以这种方式添加其他一些模块。

我现在所处的位置是一个使用Express构建Node的API项目，该API很好并且可以按预期工作。然后，我还有一个客户端文件夹，通过

在其中初始化了Angular项目。

ng new client.

对我来说奇怪的是需要启动项目的两个服务器（不同的端口）。

这种正常的做法是像这样进行项目吗？还是最好在节点项目中包含Angular并使用Express sendFile呈现html文件？我目前正在尝试使用：

app.sendFile('app.component.html')

在Express中

并在我的Angular项目中引用app.component.html文件。这将呈现按钮，但不应用应从Angular项目中应用的任何样式。

如果我跑步：

ng serve

从客户端文件夹中的Angular项目中

，可以正确渲染包含样式的同一html页面。

最好将客户端和api分开，从而迫使我运行类似命令（出于开发目的）...

nodemon

要启动Web服务器并接受请求...然后还要运行。.

ng serve

要启动客户端并开始拨打电话吗？

这是我的第一篇文章，所以我希望它不太主观。我发现的信息很少，涉及堆栈方面的此类问题。大多数教程只是基于代码的，而不是理论上的。在这个问题上的任何帮助或建议，将不胜感激。

Answer 1

您可以执行app.sendFile（'app.component.html'）解决方案。使用ng服务器的唯一好处是，当您开发Angular端时，ng服务器将自动提取更改。但是您可以使用ng build --watch来做到这一点。我个人还没有使用过nodemon，但这听起来很合理。使用ng服务器和节点的问题在于，您需要使用CORS才能使其全部正常工作-Angular服务器将使用不同的端口，因此可以说是一个不同的网站。我做了一段时间。

看起来像这样

    const cors = require('cors')
    var corsOptions = {
       origin: 'http://localhost:4200',
       optionsSuccessStatus: 

     }
    app.use(cors(corsOptions));

编辑：

发布此答案后，我发现了另一个对我有用的解决方案。使用代理运行ng serve。对我来说看起来像这样。 ng serve --proxy-config proxy.config.json

配置文件如下

{
"/machine/*":{
      "target":"http://X.y.com:8080",
      "secure":false,
  "logLevel":"debug"
},
"/lookup/*":{
    "target":"http://X.y.com:8080",
    "secure":false,
    "logLevel":"debug"
  },
  "/edit/*":{
    "target":"http://x.y.com:8080",
    "secure":false,
    "logLevel":"debug"
  },
  "/delete/*":{
    "target":"http://x.y.com:8080",
    "secure":false,
    "logLevel":"debug"
  },
  "/edit/*":{
    "target":"http://x.y.com:8080",
    "secure":false,
    "logLevel":"debug"
  },
  "/list/*":{
    "target":"http://x.y.com:8080",
    "secure":false,
    "logLevel":"debug"
}

Express应用程序实际上在另一台计算机上运行。您可以与在该计算机上运行的完整Express应用程序共享后端-您仅在运行访问数据的部分-例如RESTFul接口。

Answer 2

这是一个主观问题，所以我只能提出自己的观点：最好将您的客户端与服务器分离。这样，您一定知道哪一部分去了;）另外，您可能会在后端和前端使用两个完全不同的堆栈（Express与Angular）。保持两个分离的项目将使您的依赖项保持分离，依此类推。如果您想在某个时候为客户端或服务器更改堆栈，则无需为整个事情更改堆栈，也无需费力地知道哪个部分是客户端哪一部分是服务器。

我目前正在一个客户端和服务器都放在一个地方的项目中。我绝对不推荐给任何人...特别是对于Web项目。

也就是说，我建议两个项目中使用相同的命名/缩进/ ...约定（因为它们使用相同的语言）。这将使人们可以轻松地在两者上进行工作。 Angular有some guidelines about how to write great code。

（至少对我而言）将服务器分离一点也不奇怪，因为这样一来，您可以只在服务器上工作，而不会为未使用的客户端消耗资源。另外，您可以使用Lorem ipsum设计客户端，这样一来，您最初不需要启动服务器即可在服务器上工作;）

旁注：ng serve仅应用于开发目的。不要将其用于生产。部署客户端：ng build --prod。这将编译您的客户端，并将其放入您的编译配置指定的文件夹中（默认为/ dist）。

使用Angular和Node最佳做法

2 个答案: