Развертывание приложения angular на Apache Tomcat 404 проблема глубоких ссылок

Я пытаюсь выяснить, как настроить сервер Apache Tomcat для обслуживания углового приложения с глубокими ссылками. Например:

статический сервер обычно возвращает индекс.html, когда он получает запрос на mysite.com/. Но она отвергает mysite.com/heroes/42 и возвращает ошибку 404 - Not Found, если она не настроена для возврата индекса.вместо этого html.

Я хочу обслуживать угловое приложение на localhost / angular, я пробовал следующее:

1) построить угловые применение с:

ng build --prod --base-href .

2) скопируйте содержимое папки сборки (по умолчанию: dist) в $ApacheLocation/webapps/angular

3) Добавьте перезаписи в $ApacheLocation/conf/Catalina/localhost / rewrite.config 

# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d  
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^/angular/.*$ /angular/index.html

4) Добавление клапана чуть ниже метки Хоста 

 <Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true"> 
   <Valve className="org.apache.catalina.valves.rewrite.RewriteValve"/>

5) запуск сервера Tomcat и переход на localhost / angular даст мне:

Uncaught SyntaxError: неожиданный токен для всех .расслоения js (e.g главный.пачка.в JS)

Если я не включаю правила перезаписи, tomcat будет служить localhost / angular как ожидалось но даст 404 по глубоким ссылкам.

Мои настройки:

  • tomcat версии 9.0.0.М26
  • угловое версии 4.4.2
  • @angular / cli: 1.4.2
  • узел: 8.5.0
  • npm: 5.4.2
  • ОС: Linux x64
6
angular angular-cli apache deployment tomcat

1 ответов

мне удалось исправить эту проблему e.g http://localhost:8080/angular/player/detail/4 со следующими шагами:

1) построить угловое приложение с: ng build --prod-bh ./ -д /углового

2) скопируйте содержимое встроенного приложения в $ApacheLocation/webapps / angular

3) правило перезаписи:

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/angular/(.*) /angular?path=

4) Настройка навигации в приложении.деталь.ТС:

constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

ngOnInit() {
const path = this.activatedRoute.snapshot.queryParams['path'];
const navigateTo = '/' + path;

if (path) {
  this.router.navigate([navigateTo]);
}

}

вы можете найти здесь тестовый проект : https://github.com/avuletica/test

объяснение правил перезаписи:

# %{REQUEST_PATH} corresponds to the full path that is used for mapping.
# ! NOT character 
# '-f' (is regular file) Treats the TestString as a pathname and tests whether or not it exists, and is a regular file.
# ^ matches the beginning of the string or line
# . matches any charceter except line breaks
# * match 0 or more of the preceding token

Так что в основном, если нет файла на / angular / anything tomcat отправляет полный путь в виде строки запроса в angular application и из этого запроса param angular обрабатывает маршрутизацию.

6