Удаление # из URL не работает после развертывания - HTTP 404 - PullRequest
Новая
       36

Удаление # из URL не работает после развертывания - HTTP 404

0 голосов
/ 21 декабря 2018

Я пытаюсь избавиться от # -красных URL-адресов в моем приложении Angular ( Google рекомендует его в случае, если ваше приложение не отображает индексируемый контент при первой загрузке).Веб-приложение находится в каталоге static/ моего приложения Spring Boot.

Поэтому я отключил использование #: 

export const AppRouting = RouterModule.forRoot(routes, {
  useHash: false,
  enableTracing: false
});

На моей локальной машине все работает нормально, например,

http://localhost:4200/cars/berlin

перечисляет все автомобили в Берлине, но

http://www.example.com/cars/berlin

Дает мне HTTP 404 после развертывания сайта.

Я неуверен, почему это происходит.Как это исправить?

Однако корневой URL http://example.com - это , работающий корректно .Содержимое веб-сайта отображается, но ни одна страница ниже недоступна.

Ответы [ 4 ]

0 голосов
/ 21 декабря 2018

Я так и сделал.Это проще, как можно предположить из длины этого ответа.

1) Перемещение приложений по разным путям

Я переместил все свои приложения (сейчас их два) в подпункт.каталоги.Это означает, что все мои приложения должны работать с base-href, как в 

www.example.com/admin-tool/index.html
www.example.com/web/index.html

. Это команда ng, которую я использую для создания приложения admin-tool: 

#!/usr/bin/env bash

BASE_HREF=admin-tool

ng build --aot --prod --base-href /$BASE_HREF/ --output-hashing none --output-path dist/$BASE_HREF --deploy-url /$BASE_HREF/

2) Перемещение приложений в проект Spring

Перемещение / копирование содержимого в dist/ (вывод ng build) в (в моем случае) src/main/resources/static, если вы 'не собираем его там уже: 

src/main/resources/static/admin-tool
src/main/resources/static/web

3) Выполните необходимую переадресацию

Как уже упоминалось в других ответах, теперь нужно перенаправить запросы в соответствующие файлы index.html "«(давайте просто назовем это так).

Вот почему (насколько я понимаю): До того, как мы сделали все это, Angular просто работал на пути #, что приводило к тому, что код JS обновлялся в зависимости от того, что после #.И если я правильно понял - удаление # будет по существу означать, что браузер теперь делает GET-запросы для всех этих URL-адресов.Таким образом, из примера cars, если у меня есть место / маршрут http://www.example.com/web/cars/berlin, то теперь это будет запрос GET, который должен обработать сервер - в этом случае перенаправьте его на правильную конечную точку.

Ниже приведен код, который я использую в своем бэкэнде для достижения этой цели: 

@Controller
public class ForwardController {

    @RequestMapping(value = "/*")
    public String rectRoot(HttpServletRequest request) {
        return "forward:/web/index.html";
    }

    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect(HttpServletRequest request) {

        if (request.getRequestURI().startsWith("/admin-tool")) {
            return "forward:/admin-tool/index.html";
        } else if (request.getRequestURI().startsWith("/web")) {
            return "forward:/web/index.html";
        }

        return "forward:/web/index.html";
    }
}

Я пока не даю 100%, и я действительно надеюсь, что это просто обходной путь, нодо сих пор у меня нет никаких проблем с ним.

Теперь вот почему я все это делаю:

Очевидно, что рекомендуется отойти от путей # -ed по нескольким причинам.Поскольку я использую Angular, мне придется пройти еще несколько миль, чтобы начать поисковую оптимизацию (SEO), но из того, что я получаю ([1], [2], [3]), вы должны избегать этого, так какGoogle не индексирует это.Они могут использовать его только как якорь, но если у вас есть контент AJAX за вашим #, то у вас будет плохое время.

См. [4] о #!, который также кажется устаревшими взгляните на [5] и [6].

[1] https://www.oho.com/blog/explained-60-seconds-hash-symbols-urls-and-seo

[2] https://www.seroundtable.com/google-no-hashtags-in-urls-26537.html

[3] https://www.seroundtable.com/google-no-url-fragments-23449.html

[4] https://webmasters.stackexchange.com/a/18606/64452

[5] https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html

[6] https://snipcart.com/blog/angular-seo-universal-server-side-rendering

0 голосов
/ 21 декабря 2018

Вам нужно сбросить запрошенный маршрут на index.html

Это может помочь:

https://angular.io/guide/deployment#server-configuration

0 голосов
/ 21 декабря 2018

Попробуйте: - Сделайте Build проекта и просто перейдите в папку dist и создайте одно имя файла ".htaccess" и вставьте в него приведенный ниже код 

    <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

и сохраните его или для болееПожалуйста, обратитесь по этой ссылке

https://github.com/angular/angular-cli/issues/5113

0 голосов
/ 21 декабря 2018

Вам необходимо настроить перезапись URL на вашем веб-сервере.Конфигурации различны для разных веб-серверов.Использование # в URL-адресе указывает Angular на начало URL главной страницы, и логика SPA работает с этим.Без # Angular не может определить начало главной страницы.Поэтому вам необходимо настроить его в конфигурациях веб-сервера.

...