Приложение Ionic 4, размещенное на Firebase, возвращает 404 ТОЛЬКО при перезагрузке - PullRequest
Новая
       9

Приложение Ionic 4, размещенное на Firebase, возвращает 404 ТОЛЬКО при перезагрузке

0 голосов
/ 09 января 2019

Я создал Ionic 4 PWA с помощью @ angular / pwa, хостинга Firebase и этого очень полезного учебника.

После выполнения всех инструкций в руководстве (и создания моего приложения в папке 'www') я развернул свое рабочее приложение Ionic 4 на по этой рабочей ссылке , используя 'firebase deploy' в CLI.

Проблема: при первом посещении страницы все работает отлично и без изъянов. Но когда я перезагружаю страницу или захожу на страницу с помощью панели поиска (например, набираю « https: //..link../login»), Firebase возвращает мне ошибку 404.

Этот файл не существует, и в текущем каталоге не было найдено index.html или 404.html в корневом каталоге.

В консоли:

Не удалось загрузить ресурс: сервер ответил со статусом 404 ()

Мой firebase.json: 

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

Мой модуль угловой маршрутизации: (app-routing-module.ts) 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'landing', loadChildren: './landing/landing.module#LandingPageModule' },
  { path: 'add-event', loadChildren: './add-event/add-event.module#AddEventPageModule' },
  { path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'add-profile', loadChildren: './add-profile/add-profile.module#AddProfilePageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Что я могу сделать, чтобы исправить эту ошибку?

1 Ответ

0 голосов
/ 09 января 2019

Приложения Angular / Ionic направляют весь трафик в файл index.html и направляют запрос оттуда в нужный модуль / компонент. При попытке доступа к https://applifybyamplify.firebaseapp.com/login firebase ищет папку ./login/index.html, поэтому вы получаете 404.

Вам необходимо использовать rewrite правил в ваших firebase.json.

Как-то так должно работать 

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [   
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}
...