Angular 5 6 | URL routes not working with routing

Question

I've reached a dead end trying to work with url paths in my Angular project. I have implemented routing and routerLinks are working as intended and even with guards to control navigation. However I need to be able to use my browser back and forward arrows to navigate activated routes. Trying to implement this functionality I realized my routing is behaved strangely. According to the tutorial here Angular Routing I should be able to reach my components by appending /MyComponentPath. When I do this my Angular app always redirects to the landing page / front page. I.e routes like:

localhost:4200/events
localhost:4200/dashboard
localhost:4200/my-profile

all redirect to /landing-page. Routing works when clicking links in the menues, however manually appending in the address bar does not work.

Router

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminModule } from './admin/admin.module';
import { AuthGuard } from './core/auth.guard';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
import { ... ] from '...ALL MY COMPONENTS'; // THIS PART HAS BEEN ABBREVIATED

const routes: Routes = [
  { path: 'landing-page', component: LandingPageComponent },
  { path: 'loggedin-dashboard', component: LoggedinDashboardComponent, canActivate: [AuthGuard] },
  { path: 'events', component: EventsComponent, canActivate: [AuthGuard], canDeactivate: [CanDeactivateGuard] },
  { path: 'my-profile', component: MyProfileComponent, canActivate: [AuthGuard] },
  { path: 'create-new-event', component: CreateNewEventComponent, canActivate: [AuthGuard] },
  { path: 'about', component: AboutComponent },
  { path: 'feedback', component: FeedbackComponent, canActivate: [AuthGuard] },
  { path: 'contact', component: ContactComponent },
  { path: 'terms-of-service', component: TermsOfServiceComponent},
  { path: 'cookies-consent', component: CookiesConsentComponent, canActivate: [AuthGuard] },
  { path: 'privacy-policy', component: PrivacyPolicyComponent },
  { path: 'my-events', component: MyEventsComponent, canActivate: [AuthGuard] },
  { path: 'prices', component: PricesComponent},
  { path: 'payment', component: PaymentComponent, canActivate: [AuthGuard] },
  { path: 'my-event', component: MyEventComponent, canActivate: [AuthGuard] },
  { path: 'patch-notes', component: PatchNotesComponent, canActivate: [AuthGuard] },
  { path: 'view-event', component: ViewEventComponent, canActivate: [AuthGuard] },
  { path: 'rate-event', component: RateEventComponent, canActivate: [AuthGuard] },
  { path: 'admin-module', loadChildren: () => AdminModule, canActivate: [AuthGuard] },
  {
    path: 'dummy-list',
    component: DummyListComponent,
    data: { title: 'Dummy List' },
  },
  { path: '',
    redirectTo: '/landing-page',
    pathMatch: 'full',
  },
  { path: '**', component: PageNotFoundComponent }
];

export const ModuleRouting: ModuleWithProviders = RouterModule.forRoot(routes);

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class RoutingModule {}

App module

...imports...

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent,
    DummyListComponent,
    LandingPageComponent,
    LoggedinDashboardComponent,
    PageNotFoundComponent,
    FooterComponent,
    EventListComponent,
    EventFilterComponent,
    LandingPageHeaderComponent,
    CreateAccountFormComponent,
    CreateNewEventComponent,
    EventsComponent,
    MyProfileComponent,
    ImageUploadComponent,
    UserImageGalleryComponent,
    EventControlMenuComponent,
    FeedbackComponent,
    AboutComponent,
    ContactComponent,
    AboutComponent,
    ContactComponent,
    FeedbackComponent,
    TermsOfServiceComponent,
    CookiesConsentComponent,
    PrivacyPolicyComponent,
    ActiveBlockedPipe,
    MobileLoginHeaderComponent,
    MyEventsComponent,
    PaymentComponent,
    PricesComponent,
    MyEventComponent,
    PatchNotesComponent,
    ViewEventComponent,
    ConfirmationDialogComponent,
    RateEventComponent,
    CreateWallPostComponent
  ],
  entryComponents: [MobileLoginHeaderComponent, ConfirmationDialogComponent, CreateWallPostComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    NgbModule.forRoot(),
    RoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatTabsModule,
    ModalGalleryModule.forRoot(),
    AngularFontAwesomeModule,
    AngularWebStorageModule,
    MatProgressBarModule,
    HttpClientModule,
    MatFormFieldModule,
    MatCardModule,
    MatListModule,
    MatIconModule,
    MatExpansionModule,
    MatInputModule,
    MatButtonModule,
    MatChipsModule,
    MatSelectModule,
    MatGridListModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatMenuModule,
    MatToolbarModule,
    MatTooltipModule,
    MatDialogModule,
    MatRadioModule,
    MatStepperModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatBadgeModule,
    RouterTestingModule,
    NgxSpinnerModule,
    HttpModule,
    AdminModule,
    ToastrModule.forRoot()
  ],
  providers: [CookieService, AuthGuard, CanDeactivateGuard],
  bootstrap: [AppComponent]
})



export class AppModule { }

With my described symptoms how do you I get my router/routing to behave as desired? From the user being unable to enter manual paths appending /path to being able to.

Hello. I just did, a hard refresh of the app happens and we are redirected to /landing-page. — DaMexicanJustice
Here is a link to a recording I made showing what happens drive.google.com/open?id=1dTFq0rn8-_v5FKpWGBLGqD06UGGh0v8O — DaMexicanJustice
I can write /psldo21k3kogdigjsugj38421y98huaoshdoa for that matter and the same will happen, so it's like it cannot find the path and defaults. — DaMexicanJustice
With the debugging tool Augury I can see that I have no instance providers [RouterOutlet] when selecting my router-outlet in the component tree. I wonder if this is significant. — DaMexicanJustice

DaMexicanJustice DaMexicanJustice · Accepted Answer · 2018-11-05T14:53:41

The reason my app works with routerLinks is because the router can evaluate our current route and how to proceed from their when working client side. However in order to have URL works (think invitation email linking to a specific component with params etc) we have to setup something server side depending on our host. See this link for help Routed apps must fallback to index.html

Angular 5 6 | URL routes not working with routing

2 Answers