Angular ：使用 `GitHub` 页面重新加载后获取 `404`

Question

我已经在 GitHub 页面上部署了我的 Angular 网站，但是我遇到了问题。

下面是我的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://[user-name].github.io/[project-name]/”，它工作正常并重定向到“https ://[用户名].github.io/[项目名]/main”成功。但是在我点击浏览器的重新加载按钮后，它向我显示 404 page not found。

我的Angular版本是9.1.8。

谢谢！

Answer 1

根据 Angular doc，您必须复制 index.html 并将其命名为 404.html。

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

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

Angular ：使用 `GitHub` 页面重新加载后获取 `404`

Angular : Get `404` after reload with `GitHub` page

github-pages

angular