Обработка перезагрузки F5 в Angular - PullRequest
Новая
       68

Обработка перезагрузки F5 в Angular

0 голосов
/ 07 мая 2020

У меня проблема с моим angular проектом. В dev (ng s) работает нормально, и после нажатия клавиши F5 страница перезагружается правильно и работает нормально.

Когда я создаю и развертываю проект на удаленном сервере, все работает нормально, но после нажатия кнопки F5 страница перезагружается и отображается ошибка 404 - не найдено. Что я делаю не так?

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

const routes: Routes = [
  // hlavní cesty routingu
  { path: "login", component: LoginComponent },
  { path: "registration", component: RegisterComponent },
  { path: "resetPassword", component: ResetPasswordComponent },
  { path: "resetPasswordNew", component: InsertNewPasswordComponent },

  {path: "system",
  component: MainComponentComponent, 
  canActivate: [AuthGuard], // Auth guard mi vrací true nebo false podle toho, zda už mám načtený token nebo ne
  children: [ 
    { path: 'dashboard', component: DashboardComponent, canActivate: [RoleGuardService]},  //RoleGuardService mi hlídá, zda je lognutý žák nebo učitel
    { path: 'baterie'  , component: BaterieComponent},
    { path: 'settings' , component: SettingsComponent,
    children: [
      {path: 'info' , component: InfoComponent, canActivate: [RoleGuardService]}
    ]
    },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full', },
  ]
  },

  { path: '', redirectTo: 'login', pathMatch: 'full', },
];

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

Спасибо!

1 Ответ

0 голосов
/ 07 мая 2020

Вы должны прочитать Angular - Документация по развертыванию .

Перенаправленные приложения должны вернуться к index.html

Angular приложения являются идеальными кандидатами для обслуживание с простым сервером stati c HTML. Вам не нужен серверный движок для динамического создания страниц приложения, потому что Angular делает это на стороне клиента.

Если приложение использует маршрутизатор Angular, вы должны настроить сервер для возврата главная страница приложения (индекс. html) при запросе файла, которого у нее нет.

Перенаправленное приложение должно поддерживать «глубокие ссылки». Глубинная ссылка - это URL-адрес, указывающий путь к компоненту внутри приложения. Например, http://example.com/heroes/42 - это глубокая ссылка на страницу сведений о герое, на которой отображается герой с id: 42.

Нет проблем, когда пользователь переходит по этому URL-адресу из работающего клиента. Маршрутизатор Angular интерпретирует URL-адрес и направляет к этой странице и герою.

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

Сервер stati c обычно возвращает index. html, когда получает запрос на http://example.com/. Но он отклоняет http://example.com/heroes/42 и возвращает ошибку 404 - Not Found, если он не настроен на возврат index. html.

...