Angular 8 Странная проблема маршрутизации после развертывания на страницах Github - PullRequest
Новая
       42

Angular 8 Странная проблема маршрутизации после развертывания на страницах Github

1 голос
/ 24 марта 2020

Это приложение отлично работает локально, и все выглядит нормально после того, как я развернул его на страницах Github, форма работает, API работает, кнопки работают ... НО, каждый раз, когда я обновляю sh страницу, я получал страницу 404 ( За исключением домашней страницы), тогда, если я нажму lo go на навигационной панели, он должен перенаправить обратно на домашнюю страницу, вместо этого я также получил страницу 404.

Изображение домашней страницы

У меня была проблема с base-href при создании приложения, я пробовал разные решения foundon web, установил base-href на следующее: angularTest, "/ angularTest", "/ angularTest /" или как Angular do c предлагает что-то вроде "https://xxx.github.io/angularTest", все они получают пустую страницу при развертывании на страницах github, ошибка 404 в консоли, и это единственный способ, которым это будет работа: 

ng build --prod --base-href=""

Кстати, имя проекта angularTest.

Кто-нибудь знает, как это исправить? Очень признателен!

Ссылка на развернутое приложение: https://nay-said.github.io/angularTest/

app.component. html: 

   <nav class="navbar navbar-dark bg-dark navbar-expand-md">
    <a href="/" class="navbar-brand ml-5">
        <h3>Angular Demo</h3>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" 
             aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a routerLink="form" routerLinkActive="active" class="nav-link text-white"><h6>Form</h6></a>
            </li>
            <li class="nav-item">
                <a routerLink="/listings" routerLinkActive="active" class="nav-link text-white"><h6>Listings</h6></a>
            </li>
            <li class="nav-item">
                <a routerLink="/calendar" routerLinkActive="active" class="nav-link text-white"><h6>Calendar</h6></a>
            </li>
        </ul>
    </div>
</nav>
<div class="container">
    <router-outlet></router-outlet>
</div>

маршруты: 

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'angularTest', component: HomeComponent},
  { path: 'form', component: ContactUsComponent},
  { path: 'listings', component: ListingsComponent},
  { path: 'calendar', component: CalenderComponent},
]

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes),
    CommonModule
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }
export const routingComponents = [
  HomeComponent, 
  ContactUsComponent, 
  ListingsComponent,
  CalenderComponent
]

1 Ответ

0 голосов
/ 18 апреля 2020

Как указано в Angular документации по развертыванию приложений на страницах github здесь

When the build is complete, make a copy of docs/index.html and name it docs/404.html.

Это помогло мне!

...