javascript - Angular 4 的平均堆栈应用程序

Question

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

我做了什么:

1. 为我的 Node/Express 应用程序创建了一个 MVC 目录结构。
2. 创建了一个 Node/Express 服务器。
3. 创建了一个基本的 API，该 API 带有 express 前缀路径 /api
4. 使用 POSTMAN 测试了 API
5. 使用 Angular-Cli 在我的 MEAN stack 应用程序的根目录中创建了一个 Angular 项目。
6. 在 .angular-cli.json 内已更改 outDir属性(property)../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 请求

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

---

我的问题:

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

• 此外，我每次更改 Angular 时都必须运行 ng build应用程序，以便它可以读取更改。有没有类似 nodemon 的东西但用于监视更改并自动重置的 Angular 。

• 我有 2 package.json文件。一次用于 Node/ express ，另一次用于 Angular 。应该只有 1 package.json项目中的文件？

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

• 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 的指导方针。