Angular: получить `404` после перезагрузки со страницы `GitHub`

#angular #github-pages

#angular #github-страницы

Вопрос:

Я развернул свой Angular веб-сайт на GitHub странице, но у меня возникла проблема.

Ниже приведены мои route настройки:

 const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'main', component: AppMainComponent }
];
  

Ниже приведены мои команды развертывания:

 - name: Build
        run: |
          npm install -g @angular/cli
          npm install
          ng build --prod --base-href=https://[user-name].github.io/[project-name]/
        
- name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v2
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BASE_BRANCH: master
          BRANCH: gh-pages
          FOLDER: dist/[project-name]
  

Если я перейду на свою GitHub страницу «https:// [имя пользователя].github.io /[название проекта]/», он отлично работал и перенаправлялся на «https:// [имя пользователя].github.io /[project-name]/main» успешно. Но после того, как я нажал кнопку перезагрузки браузера, мне это показалось 404 page not found .

Моя версия Angular — 9.1.8.

Спасибо!

Ответ №1:

Согласно документу Angular, вы должны сделать копию index.html и назвать ее 404.html .

  1. Когда сборка будет завершена, сделайте копию docs/index.html и назовите это docs/404.html .

bash ng build --prod --output-path docs --base-href/<project_name>/

Комментарии:

1. правильно ng build --prod --output-path docs --base-href project_name