I have a problem with my angular routing behavior. A refresh or an entered url like /user always redirects me to /home. I have also set the in the index.html file. By clicking the navigation menu buttons everything works fine. But as soon as I try to refresh the page (e.g. /register) I will be redirected to /home.
What am I doing wrong on my app.module.ts
?
It looks like this:
import { LanguageService } from './_services/language.service';
import { JwtStorageAdapter } from './_helpers/JwtStorageAdapter';
import { TruncatePipe } from './_helpers/truncatePipe';
import { RegisterService } from './_services/register.service';
import { UserService, AlertService, AuthenticationService, EventService, MemberService, ParticipationService } from './_services/index';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { CreateMemberComponent } from './user/members/create-member/create-member.component';
import { EditMemberComponent } from './user/members/edit-member/edit-member.component';
import { MaterializeModule } from 'angular2-materialize';
import { NavbarPublicComponent } from './navbarPublic/navbarPublic.component';
import { EventsComponent } from './user/events/events.component';
import { AuthGuard } from './_guards/index';
import { MembersComponent } from './user/members/members.component';
import { RegisterComponent } from './register/register.component';
import { AlertComponent } from './_directives/index';
import { NavbarUserComponent } from './user/navbarUser/navbarUser.component';
import { TeamsComponent } from './user/teams/teams.component';
import { AdminComponent } from './user/admin/admin.component';
import { CreateEventComponent } from './user/events/create-event/create-event.component';
import { DownloadComponent } from './download/download.component';
import { EventDetailComponent } from './user/events/event-detail/event-detail.component';
import { FooterComponent } from './footer/footer.component';
import { SocialmediconsComponent } from './footer/socialmedicons/socialmedicons.component';
import { AgbComponent } from './agb/agb.component';
import { EventsPastComponent } from './user/events/events-past/events-past.component';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'download', component: DownloadComponent },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'agb', component: AgbComponent },
{ path: 'user/events', component: EventsComponent, canActivate: [AuthGuard] },
{ path: 'user/members', component: MembersComponent, canActivate: [AuthGuard] },
{ path: 'user/teams', component: TeamsComponent, canActivate: [AuthGuard] },
{ path: 'user/admin', component: AdminComponent, canActivate: [AuthGuard] },
{ path: 'user/events/create', component: CreateEventComponent, canActivate: [AuthGuard] },
{ path: 'user/events/detail', component: EventDetailComponent, canActivate: [AuthGuard] },
{ path: 'user/members/create', component: CreateMemberComponent, canActivate: [AuthGuard] },
{ path: 'user/members/edit', component: EditMemberComponent, canActivate: [AuthGuard] },
{ path: 'user/events/events-past', component: EventsPastComponent, canActivate: [AuthGuard] }
//{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
declarations: [
AppComponent,
AlertComponent,
AboutComponent,
HomeComponent,
LoginComponent,
NavbarPublicComponent,
EventsComponent,
MembersComponent,
RegisterComponent,
NavbarUserComponent,
TeamsComponent,
AdminComponent,
CreateEventComponent,
TruncatePipe,
CreateMemberComponent,
EditMemberComponent,
DownloadComponent,
EventDetailComponent,
FooterComponent,
SocialmediconsComponent,
AgbComponent,
EventsPastComponent
],
imports: [
RouterModule.forRoot(appRoutes),
BrowserModule,
FormsModule,
HttpModule,
MaterializeModule
],
providers: [
AuthGuard,
AlertService,
AuthenticationService,
UserService,
EventService,
MemberService,
RegisterService,
ParticipationService,
JwtStorageAdapter,
LanguageService
],
bootstrap: [AppComponent]
})
export class AppModule { }
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }, <---add this
{ path: 'home', component: HomeComponent }
..........
]
Add pathMatch: 'full'
. Change your first route from:
{ path: '', component: HomeComponent }
to :
{ path: '', component: HomeComponent, pathMatch: 'full' }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With