使用 Angular 4 的平均堆栈应用程序

Question

我正在使用 Angular 4 制作 MEAN 堆栈应用程序。

我做了什么：

1. 为我的 Node/Express 应用程序创建了一个 MVC 目录结构。
2. 创建了一个 Node/Express 服务器。
3. 创建了一个基本 API，它带有前缀 /api 的 express 路径
4. 使用 POSTMAN 测试 API
5. 使用 Angular-Cli 在我的 MEAN 堆栈应用程序的根目录中创建一个 Angular 项目。
6. 在.angular-cli.json 内将outDir 属性更改为../public
7. 更改了我的服务器文件以将所有其他请求（不会发送到 /api）发送到 Angular 应用程序

我的目录结构：

1. angular-src 文件夹包含angular-cli生成的angular应用
2. app-api 文件夹包含我执行所有 CRUD 操作的 API。这是所有/api 路由都指向的地方。
3. app-server 文件夹仅包含一个路由文件，它将所有 / 发送到 Angular 应用程序 (public/index.html)
4. public 文件夹是 Angular 应用程序的 index.html 文件在运行 ng build 后所在的位置
5. app.js 是我的 node/express 服务器所在的位置并重定向传入的 api 请求

当我运行应用程序时，它可以工作。节点服务器将我的请求发送到带有public 文件夹的Angular Apps index.html，并显示我的app.component.html 模板。

---

我的问题：

• 我运行nodemon 来启动我的节点/express 服务器，然后导航到angular-src 文件夹并运行ng build 来设置我的角度应用程序。这个过程对我来说似乎很长，有什么更好的方法来实现这一点？

• 另外，我每次更改 Angular 时都必须运行 ng build 应用程序，以便它可以读取更改。有没有像nodemon 这样的东西但是 用于观察变化并自动重置的角度。

• 我有 2 个package.json 文件。一次用于节点/快递，另一次用于角度。一个项目中应该只有 1 个package.json 文件吗？

• 应用程序最终必须在 Heroku 上启动，目前我有一个包含 web: npm start 的 Procfile。如何在heroku中管理角度4？我需要在 Procfile 中添加ng build 命令吗？

• Angular App 和 Node/express 应该运行不同的端口（即端口 3000 和 4200）还是应该都在一个端口上？

• 我实现的结构是否适合使用 Angular 4 的 MEAN 应用程序。

我知道其中一些问题可能是基于意见的，但我正在寻求您的专业建议，以了解在这些情况下什么被认为是最佳实践。

Answer 1

这是我的两分钱（我也有一个在生产模式下在 Heroku 上运行的应用程序，我遵循了所有 Heroku 教程和最知名的教程）：

• 你必须每次运行ng build。该构建允许您缩小代码，而 ng serve 则不允许。我不知道如何使其自动化，但如果您使用 Heroku，只需推送到您的仓库即可构建您的项目（当然，如果您使用正确的命令）

• 是的，您必须在每次更改时重新构建。如果你 i18n 你的应用程序，你将不得不为你实现的每种语言运行ng build。所以你不应该让它自动化，因为它会花费时间（对我来说，2 种语言 = 6 分钟）

• 我只保留了一个 package.json 我将所有依赖项放在其中（后面和前面）

• 我的 Heroku 构建命令如下：

  "postinstall": "npm run build-i18n",
  "i18n": "ng xi18n --output-path src/i18n --out-file messages.xlf",
  "build-i18n:fr": "ng build --output-path=dist/fr --aot --prod --bh /fr/ --i18n-file=src/i18n/messages.fr.xlf --i18n-format=xlf --locale=fr",
  "build-i18n:en": "ng build --output-path=dist/en --aot --prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en",
  "build-i18n": "mkdir dist && npm run build-i18n:en && npm run build-i18n:fr"
  

postinstall 由 Heroku 推出，它为两种语言推出了两种版本。

• 您应该有不同的端口。事实上，在同一个端口上启动它们是不可能的。

• 项目的结构可以随心所欲。这取决于个人喜好。但我的建议是遵循 John Papa 的指导方针。