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

Question

I have deployed my Angular website on GitHub page, but I got a problem.

The below is my route setting:

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

The below is my deployment commands:

- 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]

If I go to my GitHub page, "https://[user-name].github.io/[project-name]/", it worked fine and redirected to "https://[user-name].github.io/[project-name]/main" successfully. But after I clicked reload button of the browser, it showed 404 page not found to me.

My Angular version is 9.1.8.

Thanks!

ng-hobby · Accepted Answer · 2020-09-12 15:55:56Z

11

According to the Angular doc, you have to make a copy of index.html and name it 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>/

answered Sep 12, 2020 at 15:55

ng-hobby

2,2092 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Parth Developer Over a year ago

correct ng build --prod --output-path docs --base-href project_name

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related