Can't display the value of the url with Angular 2's Route params

Question

I'm trying to get it that when the user types in a URL (http://localhost:4200/directory/test) it will show 'test' in the view using two-way data binding. I only get an error when I add a string to the end of the URL

ERROR : EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'test' Error: Cannot match any routes. URL Segment: 'test'

HTML

    <p>
    Directory View 
    </p>

<p>{{sampleurl}}</p>

Directory Component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-directory',
  templateUrl: './directory.component.html',
  styleUrls: ['./directory.component.css']
})
export class DirectoryComponent implements OnInit {
  sampleurl: string;

  // get a snapshit of the current sampleurl URL and display those detials in the view
  constructor(private route: ActivatedRoute) {
    this.sampleurl = route.snapshot.params['sampleurl'];
  }

  ngOnInit() {
  }

}

My routes file

import { Routes, RouterModule } from '@angular/router';
import { DirectoryComponent } from './directory/directory.component';
import { HomeComponent } from './home/home.component';


const APP_ROUTES: Routes = [
    { path: '/',
        component: HomeComponent
    },
    {
        path: '/directory',
        component: DirectoryComponent,
    },
    {
        path: '/directory/:sampleurl',
        component: DirectoryComponent,
    }
];

export const APP_ROUTES_PROVIDER = RouterModule.forRoot(APP_ROUTES);

App Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router'; // This is what we need for routing

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DirectoryComponent } from './directory/directory.component';

const appRoutes: Routes = [
  { path: 'directory', component: DirectoryComponent},
  { path: '', component: HomeComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DirectoryComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes) // Add here array with paths and components
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dean Dean · Accepted Answer · 2018-03-30T19:01:06

I don't believe you are importing your routes in to your app module. So, you have no routes, which is why you are getting that error. If your routes were being imported in to your app, you would be getting errors because you can't start a route with /. If you do, you will get this:

Unhandled Promise rejection:
Invalid configuration of route '/directory': path cannot start with a slash
; Zone:
<root>
; Task:
Promise.then
; Value:
Error: Invalid configuration of route '/directory': path cannot start with a slash
Error: Invalid configuration of route '/directory': path cannot start with a slash

So, first step is: verify you are importing your router module in your App Module. Once you have routing working, change your route config to something like this:

{ path: '', component: HomeComponent },
{ path: 'directory', component: DirectoryComponent },
{ path: 'directory/:sampleurl', component: DirectoryComponent }

Here's a working example forked from the Angular Routing Example:

https://stackblitz.com/edit/angular-4jkdxd?file=src%2Fapp%2Fdirectory-component%2Fdirectory-component.component.ts

Can't display the value of the url with Angular 2's Route params

2 Answers