Объединить два отдельных проекта Angular в один URL на сервере Apache - PullRequest
Новая
       30

Объединить два отдельных проекта Angular в один URL на сервере Apache

0 голосов
/ 13 мая 2019

У меня есть два разных проекта в Angular (один в версии 6, другой в 7), и у каждого проекта есть собственный модуль маршрутизации.

Я должен объединить их в один URL домена. Чтобы было ясно, я должен сделать так:

my-domain.com -> перейти к первому приложению.

my-domain.com / app2 / -> перейти ко второму приложению, а также в первом приложении должна быть кнопка для перенаправления во второе приложение.

Если это проще сделать my-domain.com можно перенаправить на my-domain.com / app1 .

Эти проекты уже были настроены в облаке AWS с докером и 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

Так как new 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',
  }

Я не смог найти никаких решений на самой темной стороне интернета, а также сам не понял.

Конечно, я могу объединить код из двух приложений в одно, но я бы хотел оставить его отдельно и в каждом репозитории.

Спасибо

1 Ответ

0 голосов
/ 31 мая 2019

Я решил эту проблему с настройкой 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 по умолчанию ищет папку some_route_path в htdocs, так что это плохое поведение для нас, поэтому для работающего углового приложения нам нужно внедрить специальную конфигурацию e.x. Как настроить apache для угловых 2

После применения указанной конфигурации угловое приложение начинает работать нормально. Но в моем случае я бы хотел работать с двумя независимыми угловыми приложениями.

  • domain.com -> одна программа с самим роутингом.
  • domain.com / second-app -> второе угловое приложение.

последнее приложение должно иметь собственную маршрутизацию, поэтому, если пользователь поместит url domain.com/second-app/some_other_router_page, этот случай должен обрабатываться index.html в папке second-app. При настройке по вышеуказанной ссылке первое приложение работает нормально, но при переходе ко второму приложению вся маршрутизация занимает первое, поэтому второе не работает должным образом.

Я выяснил эту конфигурацию, и теперь оба приложения работают с их маршрутизацией. 

<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>

В моем случае у меня был бизнес-кейс для этого. Но при тестировании env хорошо тестировать пару угловых приложений на одном сервере apache. Это может снизить стоимость машин.

Я могу подготовить проект github, если кто-то хотел бы увидеть пример из реальной жизни с докером Apache.

...