title: Angular 5 6 | URL routes not working with routing
body: <p>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 <a href="https://angular.io/tutorial/toh-pt5" rel="nofollow noreferrer">Angular Routing</a> 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:</p>
  
  <ul>
  <li>localhost:4200/events</li>
  <li>localhost:4200/dashboard</li>
  <li>localhost:4200/my-profile</li>
  </ul>
  
  <p>all redirect to /landing-page. Routing works when clicking links in the menues, however manually appending in the address bar does not work.</p>
  
  <p><strong>Router</strong></p>
  
  <pre><code>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: () =&gt; 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 {}
  </code></pre>
  
  <p><strong>App module</strong></p>
  
  <p>...imports...</p>
  
  <pre><code>@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 { }
  </code></pre>
  
  <p>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.</p>