Everything seems to be functioning well with the routing in my Angular 4 web-app on my development setup, and the menu redirections are working smoothly in the live version.
However, I have encountered an issue where the development version redirects to different pages when entering URLs directly into the browser's address field, whereas the live version does not. Is this a problem specific to Angular? Or should I be looking into managing redirects with my Internet Service Provider?
The code in my app.router.ts file appears as follows:
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);
In addition, within app.module.ts, the following has been implemented:
Import statements and module configurations...I find myself puzzled by the use of `forRoot` and whether it's appropriate for Angular 4 projects. Can someone shed some light on this?
Examining my app.component.html, I've noticed that a hidden router outlet is being utilized:
<body>
<app-mf-toolbar></app-mf-toolbar>
<router-outlet class="hidden-router"></router-outlet>
</body>
Could this hidden router behavior explain why my live web-app isn't behaving the same way as the development environment? How can I go about modifying this?
Furthermore, I have a menu set up in menu.component.html that includes router links, which are currently functioning correctly:
<div class="container">
<md-menu #appMenu="mdMenu">
Menu items...
</md-menu>
Menu button...
</div>