title: Angular 4 Routing not working on live web-app
body: <p>My Angular 4 web-app routing works fine in my dev environment, and the menu redirects work fine on the live version.</p>
  
  <p>However, the dev version redirects to different pages by typing in the address field of the browser, but the live version doesn't. Is this an Angular problem? Or do I need to manage my redirects with my ISP?</p>
  
  <p>My app.router.ts code is as follows:</p>
  
  <pre><code>import { ModuleWithProviders } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { HomeComponent } from './home/home.component';
  import { ArtComponent } from './art/art.component';
  import { MusicComponent } from './music/music.component';
  import { EventsComponent } from './events/events.component';
  
  export const router: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path: 'art', component: ArtComponent },
  { path: 'music', component: MusicComponent },
  { path: 'events', component: EventsComponent }
  ];
  
  export const routes: ModuleWithProviders = RouterModule.forRoot(router);
  </code></pre>
  
  <p>And in app.module.ts I have:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule, } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { router } from './app.router';
  
  import 'hammerjs';
  
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { FormsModule } from '@angular/forms';
  import { MdInputModule, MdButtonModule, MdToolbarModule, MdMenuModule, MdGridListModule, MaterialModule, MdDatepickerModule, MdNativeDateModule } from '@angular/material';
  import { HttpModule } from '@angular/http';
  
  import { AppComponent } from './app.component';
  import { MfToolbarComponent } from './mf-toolbar/mf-toolbar.component';
  import { MfMenuComponent } from './mf-menu/mf-menu.component';
  import { SplashComponent } from './splash/splash.component';
  import { ArtComponent } from './art/art.component';
  import { MusicComponent } from './music/music.component';
  import { EventsComponent } from './events/events.component';
  import { HomeComponent } from './home/home.component';
  import { ImageSliderComponent } from './image-slider/image-slider.component';
  
  // import { HTTPTestService } from './date-data.service';
  import { AuthenticationService } from './authentication-service.service';
  
  import { DataService } from './data.service';
  import { SvgViewerComponent } from './svg-viewer/svg-viewer.component';
  import { CalendarComponent } from './calendar/calendar.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      MfToolbarComponent,
      MfMenuComponent,
      SplashComponent,
      ArtComponent,
      MusicComponent,
      EventsComponent,
      HomeComponent,
      ImageSliderComponent,
      SvgViewerComponent,
      CalendarComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MdInputModule,
      MdButtonModule,
      MdToolbarModule,
      MdMenuModule,
      MdDatepickerModule, 
      MdNativeDateModule,
      HttpModule,
      RouterModule.forRoot( router ),
    ],
    providers: [
      // [HTTPTestService],
      [AuthenticationService],
      [DataService],
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>I don't understand what forRoot is doing or if it's proper to use that in Angular 4?</p>
  
  <p>My app.component.html is as follows and uses a hidden router outlet:</p>
  
  <pre><code>&lt;body&gt;
  &lt;app-mf-toolbar&gt;&lt;/app-mf-toolbar&gt;
  &lt;router-outlet class="hidden-router"&gt;&lt;/router-outlet&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Is it this hidden router behaviour that my live web-app is not reproducing and how do I change this?</p>
  
  <p>I also have a menu in menu.component.html that uses router links and this works fine:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;md-menu #appMenu="mdMenu"&gt;
          &lt;a routerLink="home"&gt;
              &lt;button md-menu-item&gt;
                  &lt;md-icon class="material-icons"&gt; home &lt;/md-icon&gt;
                  &lt;span&gt; Home &lt;/span&gt;
              &lt;/button&gt;
          &lt;/a&gt;
          &lt;a routerLink="art"&gt;
              &lt;button md-menu-item&gt;
                  &lt;md-icon class="material-icons"&gt; format_paint &lt;/md-icon&gt;
                  &lt;span&gt; Art &lt;/span&gt;
              &lt;/button&gt;
          &lt;/a&gt;
          &lt;a routerLink="music"&gt;
              &lt;button md-menu-item&gt;
                  &lt;md-icon class="material-icons"&gt; music_note &lt;/md-icon&gt;
                  &lt;span&gt; Music &lt;/span&gt;
              &lt;/button&gt;
          &lt;/a&gt;
          &lt;a routerLink="events"&gt;
              &lt;button md-menu-item&gt;
                  &lt;md-icon class="material-icons"&gt; event_note &lt;/md-icon&gt;
                  &lt;span&gt; Events &lt;/span&gt;
              &lt;/button&gt;
          &lt;/a&gt;
      &lt;/md-menu&gt;
  
      &lt;button md-icon-button [mdMenuTriggerFor]="appMenu" color="secondary"&gt;
         &lt;i class="material-icons"&gt;menu&lt;/i&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>