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

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.

2 Answers
2

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.

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


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.