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.

@Aravind . Thank you for the responses! When I try this URL, it loads the LandingPage component, but not the ResultPage component. I'm trying to get it to load the ResultPage. — Edon, Jul 11 '17 at 05:07
@Aravind unfortunantly it still redirects to the landing page component. I have updated the original post with my changes. I think it might be because my LandingPage component path: ' ' intercepts everything. — Edon, Jul 11 '17 at 05:21
https://pastebin.com/vqk6SLAD here is the result page, sorry it's a bit messy @RahulSingh — Edon, Jul 11 '17 at 05:37
the first thing is that why in the resultpage are you adding the service i:e providers: [TaskService] and also you have to get the route details in ngOnInit where are you taking those details ? — Rahul Singh, Jul 11 '17 at 05:46
I do 'providers: [TaskService]' in the resultpage, because when I remove it, I get the error " No provider for TaskService!". Should I be adding it elsewhere? By route details in the ngOnInit, do you mean the /:id? I use that id to query my service, which queries my backend api for information, which I use to display on the result page component — Edon, Jul 11 '17 at 05:50

Aman Kumar · Accepted Answer · 2017-07-12T05:31:45.623

0

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

edited Jul 12 '17 at 05:31

answered Jul 11 '17 at 05:23

Aman Kumar

16
1
4

Thank you for the response! Unfortunately, http://localhost:8080/#/details/246 , still re-directs to my landing page component after your change. http://localhost:8080/details/246 still returns Cannot GET /details/246 – Edon Jul 11 '17 at 05:40
try to remove the empty path route then take a look at the error when trying localhost:8080/details/246. – Aman Kumar Jul 11 '17 at 05:47
I tried as you said, and there was no error except for the Cannot GET /details/246 . Here is an image of what occurs http://i.imgur.com/6LGTWbu.png **note the header and footer on the left-side are loaded in my root component – Edon Jul 11 '17 at 05:53
The header and footer that you see on the left are from my root component, which loads on all components. The actual ResultPage never loads, it's just blank where the html should be – Edon Jul 11 '17 at 06:56
Try to navigate to the ResultPage by code. Like make a link and try to navigate by url there by using routerLink. The problem may be you're trying to get there manually. This sounds like your server doesn't support HTML5 pushState. You can try to switch to HashLocationStrategy which doesn't need server support. try this link https://stackoverflow.com/questions/36861628/location-and-hashlocationstrategy-stopped-working-in-beta-16 – Aman Kumar Jul 11 '17 at 07:01
"``` This sounds like your server doesn't support HTML5 pushState```" This was my issue. I was using express server, and I needed to include this https://pastebin.com/9iYbeEbM line at the bottom of my express routes. If you update your answer I will accept it. Thank you again! – Edon Jul 11 '17 at 23:10
1

finally we did it. ;) – Aman Kumar Jul 12 '17 at 05:14

Direct loading routes in Angular 2

1 Answers1