skip to Main Content

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


  1. Use a slash since you’re using full path matching
    { path: "", redirectTo: "/home", pathMatch: "full" },

    Login or Signup to reply.
  2. This issue is not related to configuring routes while this is related to base href config in index.html.

     <base href=”/”>
    

    Please check your index.html file and put appropriate value for href.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search