I have set up my routing for my webpage and I have a error that I cant work out. If i load the webpage from google www.epsomoddballs.org the page loads and then adds /home so the address is www.epsomoddballs.org/home but if i try and load www.epsomoddballs.org/home or refresh the page I get a error that the url cant be found.
const appRoutes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
{ path: "home", component: HomeComponent },
];
export const AppRoutingModule =
RouterModule.forRoot(appRoutes, { useHash: true });
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule, MatSelectModule, MatDialogModule, MatTableModule, MatTabsModule, MatIconModule, MatPaginatorModule, MatInputModule } from "@angular/material";
import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';
import { NgxTwitterTimelineModule } from 'ngx-twitter-timeline';
import { DxSchedulerModule } from 'devextreme-angular';
import { AgmCoreModule } from '@agm/core';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { AppRoutingModule } from './app.routing';
import { CommonModule, APP_BASE_HREF } from "@angular/common";
import { AppComponent } from './app.component';
import { HomeComponent } from "../component/home/home.component";
import { FooterComponent } from "../component/footer/footer.component";
import { HeaderComponent } from "../component/header/header.component";
import { KitComponent } from "../component/Kit/kit.component";
import { ClubNewsComponent } from "../component/News/clubnews.component";
import { CalComponent } from "../component/Calendar/calendar.component";
import { MabacComponent } from '../component/MABAC/mabac.component';
import { MembershipComponent } from "../component/membership/membership.component";
import { RacesComponent } from "../component/races/races.component";
import { NewRunnerDialog } from "../component/home/NewRunnerText/new_runner_text";
import { TrainingComponent } from "../component/training/training.component";
import { SundayComponent } from '../component/training/Sunday/sunday.component';
import { ThursdayComponent } from '../component/training/thursday/thursday.component';
import { TrackComponent } from '../component/training/track/track.component';
import { TuesdayComponent } from '../component/training/tuesday/tuesday.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
FooterComponent,
HeaderComponent,
ClubNewsComponent,
CalComponent,
MabacComponent,
KitComponent,
MembershipComponent,
RacesComponent,
SundayComponent,
TrainingComponent,
ThursdayComponent,
TuesdayComponent,
TrackComponent,
NewRunnerDialog
],
imports: [
BrowserModule,
AppRoutingModule,
DxSchedulerModule,
MatFormFieldModule,
MatSelectModule,
MatDialogModule,
MatTableModule,
MatTabsModule,
MatIconModule,
MatPaginatorModule,
MatInputModule,
NgbModule,
NgxTwitterTimelineModule,
BrowserAnimationsModule,
AgmSnazzyInfoWindowModule,
],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
bootstrap: [AppComponent]
})
export class AppModule { }
Thanks for your help
2
Answers
Use a slash since you’re using full path matching
{ path: "", redirectTo: "/home", pathMatch: "full" },
This issue is not related to configuring routes while this is related to base href config in index.html.
Please check your index.html file and put appropriate value for href.