Путь маршрута Angular 6 не работает для прямого URL при развертывании в подкаталоге - PullRequest
Новая
       5

Путь маршрута Angular 6 не работает для прямого URL при развертывании в подкаталоге

0 голосов
/ 04 июля 2018

app.routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './public/home/home.component';

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: '../app/customers/customers.module#CustomersModule'
  },
  {
    path: 'admin',
    loadChildren: '../app/admin/admin.module#AdminModule'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '**',    
    redirectTo: 'home',    
  }
];

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

Это прекрасно работает в среде разработки . Если я открою localhost:4200/home, то он попадет на ожидаемую страницу.

Тем не менее, один встроенный и развернутый , использующий с ng build --prod --base-href=/myngapp/ do, работает только на www.domain.com/myngapp, если я открою www.domain.com/myngapp/home напрямую, то он выдаст ошибку 404 not found .

Ответы [ 4 ]

0 голосов
/ 15 ноября 2018

Попробуйте использовать: 

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: '../app/customers/customers.module#CustomersModule'
  },
  {
    path: 'admin',
    loadChildren: '../app/admin/admin.module#AdminModule'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '**',    
    redirectTo: 'home',    
  }
];

imports: 
RouterModule.forRoot(routes, {useHash: true})
0 голосов
/ 06 июля 2018

Вы должны настроить свой HTTP-сервер (apache, Nginx или другие) для перенаправления всех URI, которые начинались с www.domain.com/myngapp/**, в файл index.html.

Обратите внимание на маршруты вашего приложения (https://angular6demoamit.000webhostapp.com/) отлично работает, когда к ним обращаются «внутри Angular» при взаимодействии с кнопками и меню. Однако, когда вы пытаетесь получить доступ к маршруту, набирая его прямо в браузере, сервер не знает, что URI https://angular6demoamit.000webhostapp.com/home является маршрутом приложения Angular. Он, вероятно, попытается загрузить страницу индекса несуществующего домашнего каталога.

Нет единой конфигурации для решения вашей проблемы. Это будет зависеть от вашего HTTP-сервера и инфраструктуры. Прочтите руководство по angular, в котором описаны примеры конфигурации некоторых типов HTTP-серверов: https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml.

0 голосов
/ 06 июля 2018

Вам необходимо настроить правильные правила перезаписи URL. Angular docs объясняет, как это сделать для большинства популярных http-серверов. Вы можете найти подробности здесь.

https://angular.io/guide/deployment#production-servers

То, что он делает, - это просто говорит серверу всегда обслуживать index.html независимо от того, каков путь запроса. например.

www.domain.com/myngapp/home -> служить index.html, а не home.html или чем-то подобным www.domain.com/myngapp/some/child/routing -> serve index.html и не пытайтесь найти какой-нибудь / child / routing.html или php и т. Д.

0 голосов
/ 04 июля 2018

Если вы копируете файлы в подпапку сервера, добавьте флаг сборки, --base-href например, если у вас есть файл index.html на сервере /myngapp/index.html, то добавьте команду с помощью build --base-href = / myngapp / else, скопируйте весь файл dist и вставьте его на сервер без base-href.

...