Когда я обновляю свой сайт, я получаю 404. Это с Angular2 и firebase

Когда я обновляю свой сайт, я получаю 404. Это с Angular2, typescript и firebase.

Я развернул firebaseapp с помощью моего приложения Angular2.

Маршруты, кажется, меняются отлично, но когда я обновляю браузер, он перенаправляет меня на 404 страницу.

Когда я обновляюсь локально, этого не происходит.

Мне не хватает настроек маршрута или настроек Firebase?

Это мой файл firebase.json:

 {
   "firebase": "test",
   "public": "src",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }

Ответ 1

Для Firebase Hosting документация по перенаправлениям и переписываниям находится здесь: https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html

Оттуда:

Используйте переписать, когда вы хотите показать один и тот же контент для нескольких URL-адресов. Перезаписи особенно полезны при сопоставлении с шаблоном, поскольку вы можете принять любой URL-адрес, соответствующий шаблону, и позволить клиентскому коду решать, что отображать.

Вы, вероятно, ищете первый пример переписывания на этой странице:

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

Это инструкция для веб-сервера для обслуживания /index.html для любого входящего запроса, независимо от того, каков путь.

Ответ 2

Я думаю, что вы используете режим по умолчанию Angular2 маршрутизации (т.е. HTML5LocationStrategy). В этом случае вам нужна некоторая конфигурация на вашем веб-сервере, чтобы загрузить index.html (файл точки входа) для каждого URL-адреса, соответствующего каждому маршруту.

Если вы хотите переключиться на подход HashBang, вам необходимо использовать эту конфигурацию:

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router'; 

import {MyApp} from './myapp';

bootstrap(MyApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}
]);

В этом случае при обновлении страницы он будет отображаться снова.

Надеюсь, это поможет вам, Thierry

Ответ 3

У меня была такая же проблема на производстве. Следующие шаги помогли мне решить проблему. Вы должны добавить в свой корневой модуль следующее:

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

и это перейдет к HashLocationStrategy. Угловая документация

Надеюсь, это поможет кому-то !!

Ответ 4

Разбираясь с принятым ответом, я хотел показать, что правила переписывания входят в правила хостинга. в firebase.json

"hosting": {
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
   } ]
}

Firebase также имеет обновленную страницу документации, откуда приведен пример выше.

Кроме того, я был сбит с толку хэш (#) вопросом об этом. Я обнаружил, что это не относится к новому Angular. Внесение этих небольших изменений в firebase.json, перестройка, публикация в firebase и последующее обновление страницы с очисткой кеша немедленно решило мою проблему 404 без обходных путей, необходимых для хэшей в URL.