将两个单独的 Angular 项目合并到 apache 服务器上的一个 URL

Question

我在 Angular 中有两个不同的项目（一个在 6 版，另一个在 7 版），每个项目都有自己的路由模块。

我必须将它们合并到一个域网址中。要清楚，我必须这样做：

my-domain.com -> 转到第一个应用程序。

my-domain.com/app2/ --> 转到第二个应用程序，并且第一个应用程序应该有一些按钮可以重定向到第二个应用程序。

如果更容易做到 my-domain.com 可以重定向为 my-domain.com/app1。

这些项目已经在 AWS 云中使用 docker 和 apache 进行了配置。现在我有两个不同的域和负载均衡器指向单独的 ECS。

我尝试做一些 apache 配置：

<VirtualHost *:80>
  ServerName my-domain.com

  LoadModule auth_openidc_module modules/mod_auth_openidc.so

  ####
  configuration for OIDC plugin
  ###

    DocumentRoot /var/www/html/my-app/www/

  Alias / "/var/www/html/my-app/www/"
    <Directory /var/www/html/my-app/www/>
        Options FollowSymLinks
        DirectoryIndex index.html
        AllowOverride FileInfo Options
        AllowOverride All
        Order allow,deny
    RewriteEngine On
    RewriteBase /

    RewriteRule ^manifest.json /base/manifest.json [L]

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^/* /index.html [L]
    </Directory>

    Alias /app2 "/var/www/html/my-app/www/app2/"
    <Directory /var/www/html/my-app/www/app2/>
        Options FollowSymLinks
        DirectoryIndex index.html
        AllowOverride FileInfo Options
        AllowOverride All
        Order allow,deny
    RewriteEngine On
    RewriteBase /

    RewriteRule ^manifest.json /base/manifest.json [L]

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^/* /index.html [L]
    </Directory>

</VirtualHost>

但不幸的是没有按预期工作。

第二个累来自那篇中篇文章：https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

由于新的 Angular 可以创建子项目：

ng generate application app1 –-routing
ng generate application app2 –-routing

因为它是简单的应用程序，就像教程中一样，按预期工作，但是在迁移我的应用程序时，每个模块都有一个错误：

ERROR in ./projects/app1/src/app/modules/contact-page-module/contact-page.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: my-app/projects/app1/src/app/modules/contact-page-module/contact-page.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:752:23)
at plugin.done.then (my-app/node_modules/@ngtools/webpack/src/loader.js:41:31)
at process._tickCallback (internal/process/next_tick.js:68:7)

已经阅读了子应用中多个模块的问题。

{
    path: 'home',
    loadChildren: '../modules/home-page-module/home-page.module#HomePageModule',
  }

我在互联网最黑暗的一面找不到任何解决方案，也没有自己弄清楚。

当然，我可以将来自两个应用程序的代码合并为一个，但我希望将它和每个存储库分开。

谢谢，

Answer 1

我用 Apache 配置解决了这个问题。也许有一天你需要那个解决方案。

主要问题是 Angular 路由。当 url 指向 domain.com/some_route_path 时，Apache 认为用户想要查看名为 some_route_path 的文件夹中的文件，但是 index.html 丢失了，因此 Apache 向我们展示了没有任何内容的页面。

让我解释更多细节，我使用默认的 Apache 配置，所以我的主文件夹是 /usr/local/apache2/htdocs，用于放置从 Angular 生成的所有文件。将 url domain.com 放入浏览器后，apache 直接指向 htdocs 并查找索引文件。但是在单击菜单后，路由重定向到 domain.com/some_route_path 并在刷新浏览器后，apache 默认在 htdocs 中查找文件夹 some_route_path 所以对我们来说是不好的行为，因此对于工作的 Angular 应用程序，我们需要注入特殊的配置 e.x。 How to configure apache for angular 2

应用上述配置后，角度应用程序开始正常工作。但就我而言，我想使用两个独立的角度应用程序。

• domain.com -> 一个具有自身路由的应用程序。
• domain.com/second-app -> 第二个角度应用程序。

后一个应用程序应该有自己的路由，所以如果用户输入 url domain.com/second-app/some_other_router_page，这种情况应该由文件夹 second-app 中的 index.html 处理。通过上述链接的配置，第一个应用程序工作正常，但是当转到第二个应用程序时，整个路由由第一个应用程序占用，因此第二个应用程序无法正常工作。

我弄清楚了那个配置，现在这两个应用程序都在使用它们的路由。

<VirtualHost *:80>
    ServerName my-domain

    DocumentRoot /usr/local/apache2/htdocs
         <Directory /usr/local/apache2/htdocs>
              Options Indexes FollowSymLinks
              AllowOverride All
              Require all granted

              RewriteEngine On
              RewriteCond %{REQUEST_FILENAME} !-f
              RewriteCond %{REQUEST_FILENAME} !-d
              RewriteCond %{REQUEST_URI} second-app
              RewriteRule second-app/(.*)$ /second-app/index.html?path=$1 [L]

              RewriteCond %{REQUEST_FILENAME} !-f
              RewriteCond %{REQUEST_FILENAME} !-d
              RewriteCond %{REQUEST_URI} !/second-app/ [NC]
              RewriteRule (.*)$ /index.html?path=$1 [L]
             </Directory>

</VirtualHost>

就我而言，我有一些商业案例要做。但是在测试环境中，最好在一个 apache 服务器中测试几个 Angular 应用程序。它可以降低机器的成本。

如果有人想查看 docker apache 的真实示例，我可以准备 github 项目。