Cannot match any routes. URL Segment

Question

I have below link in device component and I expect it route me to command device component

<a [routerLink]="['/devicescommands',device.Id]" class="col-1-4" data-toggle="tooltip" data-placement="top" title="کد های بازگشت">
                            <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
                        </a>

and this is my routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DeviceComponent } from './device/device.component';
import { CommandComponent } from './device/command/command.component';
import { DeviceConfigurationComponent } from './device/configuration/device-
configuration.component';
import { ModulesComponent } from './modules/modules.component';
import { ModuleConfigurationComponent } from 
'./modules/configuration/module-configuration.component';

const routes: Routes = [
{ path: '', redirectTo: '/modules' },

{ path: 'modules', component: ModulesComponent },
{ path: 'moduleconfiguration/:id', component: ModuleConfigurationComponent 
},

{ path: 'devices', component: DeviceComponent},
{ path: 'devicescommands/:id', component: CommandComponent },
{ path: 'deviceconfiguration/:id', component: DeviceConfigurationComponent }
];

@NgModule({
imports: [
    RouterModule.forRoot(
        routes,
        { enableTracing: true }
    )
],
exports: [RouterModule]

}) export class AppRoutingModule { }

and this is app module:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

import { AppRoutingModule } from './app-routing.module';
import { CatalogServerService } from './share/catalog-server-service/catalog-server-service'
import { StatusPipe } from './share/pipes/status.pipe';
import { ProfileConfigPipe } from './share/pipes/profile-config.pipe';
import { PersianDatePipe } from './share/pipes/persian-date.pipe';
import { SuccessFaildPipe } from './share/pipes/success-faild.pipe';

import { AppComponent } from './app.component';
import { DeviceComponent } from './device/device.component';
import { DeviceService } from './device/services/device.service';
import { DeviceConfigurationComponent } from './device/configuration/device-
 configuration.component';
import { CommandComponent } from './device/command/command.component';

import { ModulesComponent } from './modules/modules.component';
import { ModulesService } from './modules/services/modules.service';
import { ModuleConfigurationComponent } from 
'./modules/configuration/module-configuration.component';

import { DynamicFormComponent } from './share/dynamic-from/dynamic-
 form.component';
import { DynamicFormControlComponent } from './share/dynamic-from/dynamic-
 form-control.component';

import { SignalRService } from './share/services/signalr-r-service';

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    AppRoutingModule
],
declarations: [
    DeviceComponent,
    DeviceConfigurationComponent,
    CommandComponent,
    ModulesComponent,
    ModuleConfigurationComponent,
    StatusPipe,
    PersianDatePipe,
    ProfileConfigPipe,
    SuccessFaildPipe,
    DynamicFormComponent,
    DynamicFormControlComponent,
    AppComponent,
],
providers: [
    CatalogServerService,
    {
        provide: APP_INITIALIZER,
        useFactory: (configService: CatalogServerService) => { return () => configService.loadConfig(); },
        deps: [CatalogServerService],
        multi: true
    },
    ModulesService,
    DeviceService,
    SignalRService,
    { provide: LocationStrategy, useClass: HashLocationStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }

When I click on devicescommands link I expect it route to CommandComponent but I receive this error in console:

errors.ts:42 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'devicescommands/96c1f24d-6673-4df0-9704-e44842821605'
Error: Cannot match any routes. URL Segment: 'devicescommands/96c1f24d-6673-4df0-9704-e44842821605'
    at ApplyRedirects.noMatchError (apply_redirects.ts:160)
    at CatchSubscriber.eval [as selector] (apply_redirects.ts:142)
    at CatchSubscriber.error (catch.ts:55)
    at MapSubscriber.Subscriber._error (Subscriber.ts:139)
    at MapSubscriber.Subscriber.error (Subscriber.ts:109)
    at MapSubscriber.Subscriber._error (Subscriber.ts:139)
    at MapSubscriber.Subscriber.error (Subscriber.ts:109)
    at MapSubscriber.Subscriber._error (Subscriber.ts:139)
    at MapSubscriber.Subscriber.error (Subscriber.ts:109)
    at LastSubscriber.Subscriber._error (Subscriber.ts:139)
    at ApplyRedirects.noMatchError (apply_redirects.ts:160)
    at CatchSubscriber.eval [as selector] (apply_redirects.ts:142)
    at CatchSubscriber.error (catch.ts:55)
    at MapSubscriber.Subscriber._error (Subscriber.ts:139)
    at MapSubscriber.Subscriber.error (Subscriber.ts:109)
    at MapSubscriber.Subscriber._error (Subscriber.ts:139)
    at MapSubscriber.Subscriber.error (Subscriber.ts:109)
    at MapSubscriber.Subscriber._error (Subscriber.ts:139)
    at MapSubscriber.Subscriber.error (Subscriber.ts:109)
    at LastSubscriber.Subscriber._error (Subscriber.ts:139)
    at resolvePromise (zone.js:769)
    at resolvePromise (zone.js:740)
    at zone.js:817
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (ng_zone.ts:253)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

devicescommands link is in DeviceComponent.

Answer 1

Your CommandComponent should import ActivatedRoute from @angular/routes and must declare an id property, as that's the identifier used you seem to have used in your path path: 'devicescommands/:id'.

Your CommandComponent should look like this:

import { ActivatedRoute } from '@angular/router';

@Component({
  .......................................
})

export class CommandComponent implements OnInit {

  id:number;

  constructor(public _route:ActivatedRoute) { }

  ngOnInit() {
    this.id = this._route.snapshot.params["id"];
  }

}

And your HTML template can use it so:

<p>
  CommandComponent recieved the id: {{id}}
</p>

Answer 2

I believe that your devices path is interferring with your devicescommands path because both start with 'devices'. If you switch the order of the two like this:

{ path: 'devicescommands/:id', component: CommandComponent },
{ path: 'devices', component: DeviceComponent},

then it should work.