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

Question

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

我必须将它们合并到一个域中url。明确地说，我必须这样做：

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 指向域时。com/some_route_path，Apache 认为用户想要查看名为 some_route_path 的文件夹中的文件，但是 index.html 丢失了，所以 Apache 向我们展示了没有任何内容的页面。

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

应用提到的配置后 angular 应用程序开始工作正常。但就我而言，我想使用两个独立的 angular 应用程序。

domain.com -> 一个带有自身路由的应用程序。
domain.com/second-app -> 第二个 angular app.

后一个应用程序应该有自己的路由，所以如果用户放置 url 域。com/second-app/some_other_router_page，这种情况应该由文件夹 [=] 中的 index.html 处理41=]。使用上面的配置 link，第一个应用程序工作正常，但是当转到第二个应用程序时，整个路由都由第一个应用程序占用，因此第二个应用程序无法正常工作。

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

<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= [L]

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

</VirtualHost>

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

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

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

Merge two separate Angular project to one URL on apache server

apache

amazon-web-services

amazon-ecs

angular-routing

angular