Error: Cannot match any routes. URL Segment: 'submit'

Question

I'm trying to navigate from one component to another, but nothing is working for me. I've tried routerLink as well, but it didn't work too.

Below is my explore.components.ts file:

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

@Component({
  selector: 'app-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.css']
})

export class ExploreComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onClick() {
    this.router.navigate(['/submit']);
  }
}

This is my explore.html file. A click on the button is supposed to display the "submit" component.

<button type="button" class="btn" (click) = "onClick()">Click here to submit your work <i class="fa fa-hand-peace-o fa-lg"></i></button>

Both the components are children of the app component.

const ROUTES: Routes = [ {path:'', component: HomeComponent}, {path:'sign-up', component: SignUpComponent}, {path:'login', component: LoginComponent}, {path:'contact',component:ContactComponent}, {path:'explore', component:ExploreComponent} ] (in app.module.ts) — Nikita, Sep 02 '18 at 11:11
that's because I'm going from explore component to submit component, and not from app component to submit component. ? — Nikita, Sep 02 '18 at 11:16

score 1 · Accepted Answer · answered Sep 02 '18 at 11:19

try it now:

const ROUTES: Routes = [ {path:'', component: HomeComponent},
{path:'sign-up', component: SignUpComponent},
{path:'login', component: LoginComponent},
{path:'contact',component:ContactComponent}, 
{path:'submit',component: SubmitComponent}, 
{path:'explore', component:ExploreComponent} ]

you didn't have a route that navigates to the submit component you have, now you can navigate to it from any other component.

score 0 · Answer 2 · answered Sep 02 '18 at 10:40

you should have something like yourcomponent-routing-module.ts or app-routing.module.ts

If you don' t have it, generate it using angular cli.

ng generate module SomeModule --routing (or ng g m SomeModule --routing, for short)

here is a sample routing module.the route is targeting https:yoursite/dashboard/mydashboardtypevalue

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { DashboardContainerComponent } from './dashboard-    container/dashboard-container.component';
import { RequiredAuthenticatedUserRouteGuardService } from '../shared/services/required-authenticated-user-route-guard/required-authenticated-user-route-guard.service';

const routes: Routes = [{
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [ RequiredAuthenticatedUserRouteGuardService ],
  children: [
{ path: ':dashboardType', component: DashboardContainerComponent } // this is a sample required parameter

  ]},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
 })
export class DashboardRoutingModule { }

Error: Cannot match any routes. URL Segment: 'submit'

2 Answers2