CODEWITHSUNDEEP
javascriptangulartypescript
Zachscs
Zachscs

Reputation: 3673

Angular app routing errors in production

My site works fine on the dev server but when I publish it to production on GitHub pages it has a strange error. Entering the URL (yanshuf0.github.io/portfolio) brings up the page fine, however when I type in yanshuf0.github.io/portfolio/home the page fails to load and produces the following console log.

console errors

It seems to be an error at home but I don't get it since the base URL redirects to the home URL where there are no problems... 

RouterModule.forRoot([
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'blog', component: BlogComponent},
  { path: 'blog-post', component: BlogPostComponent},
  { path: '**', redirectTo: 'home' }
])

Anyone have any idea what could be the issue?

Edit: to clarify this issue doesn't occur on the development server. Edit2: the error doesn't occur when I enter yanshuf0.github.io/portfolio/home/ with the trailing slash.

Upvotes: 1

Views: 86

Answers (1)

realharry
realharry

Reputation: 1575

You need to set your "base href" in your index.html to portfolio, or whatever your project name is.

<base href="/portfolio/">

Upvotes: 2

Related Questions