Угловая маршрутизация не работает при развертывании на Tomcat 9 (Ubuntu 18.04)

Question

Я запрограммировал угловой проект на своем ПК, все работало нормально, когда я запускал его локально с помощью команды ng serve. Теперь я хочу развернуть его на tomcat на виртуальной машине (предоставленной моей школой), потому что мой проект должен быть общедоступным.

Я создал git-репозиторий и загрузил угловой проект на ВМ. Далее следовало руководство по развертыванию приложения в tomcat, которое просто состояло из 2 шагов:

1. Запустите ng build --base-href=/angular/, чтобы сгенерировать несколько файлов
2. Скопируйте сгенерированные файлы в подпапку /webapps Tomcat

Но это не работает так, как задумано. Мне кажется, что есть проблема с маршрутизацией.

Вот мой модуль маршрутизации:

const appRoutes: Routes = [
  {path: 'coachPortal', component: CoachPortalComponent},
  {path: 'userPortal', component: UserPortalComponent},
  {path: 'users', component: UsersComponent},
  {path: 'userDetails/:id', component: UserDetailsComponent},
  {path: 'mySessions', component: MySessionsComponent},
  {path: '', redirectTo: '/coachPortal', pathMatch: 'full'},
  {path: '**', component: CoachPortalComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Для навигации между маршрутами я использую этот старый простой код: window.location.href = '/users';
Это работало как шарм, когда я запускал его локально на моем компьютере.

Но я предполагаю, что причина, по которой он больше не работает после развертывания на tomcat, заключается в том, что tomcat добавляет префикс angular/.
При локальном запуске на моем компьютере URL были localhost:4200/{componenturl}.
Но на ВМ это x.x.x.x:8080/angular/{componenturl}

Но из-за перенаправления маршрутизации я получаю 404 ошибки. Когда я впервые посещаю корневой URL x.x.x.x:8080/angular, он совпадает с правилом {path: '', redirectTo: '/coachPortal', pathMatch: 'full'}. и загружает компонент coachPortal и даже меняет URL-адрес на angular/coachPortal. Но обновление страницы или ручной ввод angular/coachPortal выдает ошибку 404. И все остальные ссылки тоже не работают.

Также на coachPortal у меня есть изображение с src ../../../assets/logo.png, и оно, очевидно, не загружается из-за того, что сгенерированные файлы в папке webapps имеют другую структуру папок ... Как это исправить? Изображение находится прямо в папке активов.

Answer 1

Вы можете попробовать использовать useHash: true. Для меня это работает.

Пример:

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule],
})

и URL на виртуальной машине будет x.x.x.x:8080/angular/#/{componenturl}

Answer 2

Насколько я понимаю, когда вы пытаетесь перейти к виртуальному подкаталогу, который обычно разрешается с помощью угловой маршрутизации, когда он развернут, ваш веб-сервер ищет фактический каталог 'coachportal', который не существует, поэтому возвращает 404. Если маршрут был пройден через ваше приложение (с помощью кнопок навигации и т. Д.), Angular Router разрешит его и выведет виртуальный подкаталог. Ваш веб-сервер останавливает маршрут, чтобы добраться до Angular Router, чтобы решить его. Ваш веб-сервер проверяет, существует ли фактическая папка или файл, а затем перенаправляет в корневой каталог для обработки маршрутизации, если нет файла или папки с таким именем. Для веб-проектов, которые я развернул в IIS, я включил файл web.config со следующим кодом:

<configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
</configuration>

из этого поста: Маршрутизация в Angular 7, работающая в подпапке, работает неправильно Я не уверен, будет ли она работать с вашими настройками развертывания, но, по крайней мере, должна дать вам представление о том, что может происходить ,

Для вашей папки ресурсов удалите ../ s для относительного каталога и просто оставьте его как assets/logo.png, это должно обработать это правильно. Вы можете проверить это локально.

РЕДАКТИРОВАТЬ: некоторые изменения для ясности