Angular 多个应用程序 dist 文件夹不会在本地服务器上加载索引文件答案

【问题标题】：Angular multiple apps dist folder doesn't load the index file on local serverAngular 多个应用程序 dist 文件夹不会在本地服务器上加载索引文件
【发布时间】：2020-12-25 07:37:40
【问题描述】：

我有一个主要应用程序和几个产品应用程序，我想使用单个 url 提供服务。

我已将主应用程序的分发放在本地 http-server 的公共文件夹的根目录中。在 public 文件夹中，我创建了 products/app2 和 products/app3 并分别放置了 app2 和 app3 的分布。

-public
    -products
        -app2
          /* build of app2 */
        -app3
          /* build of app3 */
     .....
     .....
     /* build of main app */

当我点击网址时

 http://192.168.18.10:8080/

加载主应用程序的内容。然而，当我击中

http://192.168.18.10:8080/products/app2/

app2 的 index.html 没有加载，它重定向到主应用程序。

我尝试将简单的 index.html 文件直接放在产品文件夹的根目录下，效果很好。

为什么放置在上述结构中的 Angular 分发构建无法加载以及我应该如何路由到产品构建。

【问题讨论】：

Angular 是一个 spa，你需要为你的应用配置路由器。
@KevinZhang - 感谢您的回复，请分享我可以遵循的任何资源/文章来实现这一目标。我确实了解单个 Angular 应用程序中的路由，但在上述架构上没有找到太多。
@KevinZhang - 假设这里提到的方法就是你所指的stackoverflow.com/questions/48126517/…
您选择“多个产品应用程序”而不是使用具有多个模块的单个应用程序用于不同产品的任何特殊原因？通常，使用 Angular，您不会将各种应用程序嵌套在另一个程序中。
@StacyJ 你能添加你的 package.json 文件以便我能更好地帮助你吗？

标签： angular architecture angular-routing

【解决方案1】：

我认为问题在于您的网络服务器已配置为所有不指向现有文件的请求都被重定向到主 Angular 应用程序（这通常是正确的，但在您的情况下不是）。您应该修改您的 htaccess 文件（如果您使用的是 apache）或您的 nginx 配置文件，以便如果请求 URL 以子应用程序文件夹名称开头，则请求将重定向到该特定子应用程序文件夹根目录，而不是主应用程序。一旦您将请求重定向到正确的 Angular 应用程序，Angular 将完成剩下的工作。

【讨论】：

【解决方案2】：

我认为你有三个选择。

（可能很明显）将您的两个应用程序合并为一个 Angular 应用程序，创建一个包含两个模块的应用程序（每个模块都是其中一个应用程序），因此当您构建时，所有内容都已经“粘合”在一起了。
有点像选项 1，但更高级。如果这些应用程序除了登录之外没有其他共同点，您可以使用 Monorepo 模式创建一个应用程序。就像 Google 为他的 Google Workspace（以前称为 G Suite aka Gmail、Drive、Maps...）所做的那样。一个很好的指南：https://medium.com/@laakissi.achraf/angular-monorepo-patterns-with-nx-part1-73b50c4b6e7b)
使用 Nginx + Docker（一个很好的指南：https://medium.com/@kaushiksamanta23/serve-multiple-angular-apps-from-single-nginx-server-in-development-production-mode-with-docker-ae8d53b43283）

【讨论】：