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. Ie 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.

Answer 1

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

Answer 2

I found a solution. It was an error.

There are two possible answers to anyone in the same situation as me. First of:

import { NgModule, ModuleWithProviders } from '@angular/core';

Make sure you are importing 'ModuleWithProviders' from @angular/core, I was importing from a wrong package.

Secondly: // Routing

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { RoutingModule, routingModule } from './routing.module'

Check capitalization of import names. In the above example I import both, just to be sure it is getting the right module.