Direct loading routes in Angular 2

Question

I have an Angular application that navigates to two routes:

http://localhost:8080/ /* Landing page */
http://localhost:8080/details/:id /* Result page */

Whenever I navigate to, for example, http://localhost:8080/details/4235 . I'm met with the error: Cannot GET /details/4235

Here is how I setup my routes, in my:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';

import { TitleService } from './services/title.service';

const routes: Routes = [
  { path: '', component: LandingPage },
  {
    path: 'details/:id', component: ResultPage, pathMatch: 'full'
  }
];

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

Which I import into my:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { RouterModule, Routes } from '@angular/router';
import { AppComponent }         from './app.component';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    LandingPage,
    ResultPage
  ],
  imports: [
    BrowserModule,
    FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I'm having trouble finding a working Angular 2 method of dealing with direct-linking to a url.

How can I setup direct linking in Angular 2, so that when I load, say, http://localhost:8080/details/4235 it loads my ResultPage component.

edit:

Loading http://localhost:8080/#/details/4235 , is valid, but it re-loads the LandingPage component. And I am trying to load the ResultPage component when there is an extended url.

Answer 1

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingPage } from 
'./components/landingpage/landingpage.component';
import { ResultPage } from 
'./components/resultpage/resultpage.component';

import { TitleService } from './services/title.service';

const routes: Routes = [
  { path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage
}
];

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

here you're loading the empty path first. Then the other paths will load. Update the empty path route. Keep it at last in the hierarchy.

Updated Code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingPage } from ' 
./components/landingpage/landingpage.component';
import { ResultPage } from 
'./components/resultpage/resultpage.component';

import { TitleService } from './services/title.service';

const routes: Routes = [
{
path: 'details/:id', component: ResultPage
},
{ path: '', component: LandingPage } //<-- here  
];

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

EDIT: Also there might be problem that your browser doesn't support HTML5 pushState. I'm referring some SO links that might help out.

Configure history.pushState for Angular 2

enter link description here

Angular 2.0 router not working on reloading the browser