Question

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

我必须将它们合并为一个域网址。为了清楚起见，我必须采用这种方式：

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

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

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

该项目已经使用docker和apache在AWS云中进行了配置。现在，我有两个不同的域和负载均衡器点来分隔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配置问题。也许有一天您需要那种解决方案。

主要问题是角度布线。当url指向domain.com/some_route_path时，Apache认为用户希望查看名为some_route_path的文件夹中的文件，但是缺少index.html，因此Apache不会向我们显示任何页面。

让我解释更多细节，我使用默认的Apache配置，因此我放置Angular中所有生成文件的主文件夹为 / usr / local / apache2 / htdocs 。将url domain.com放入浏览器后，apache指向htdocs，并寻找索引文件。但是在单击菜单后，路由重定向到domain.com/some_route_path并刷新浏览器后，默认情况下，apache会在htdocs中查找some_route_path文件夹，因此这对我们来说是不良行为，因此要正常工作，我们需要注入特殊的配置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服务器中测试几个角度应用程序。它可以降低机器成本。

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

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

1 个答案: