CODEWITHSUNDEEP
javascriptangularroutes
AnaCS
AnaCS

Reputation: 1011

Error when creating a navigate function through button click using router Angular 6

I am new to angular 6 and it's navigation/routing, I am sorry if this sounds obvious.

I am trying to have a button with a function to navigate to the login page, but I keep getting this error:

" Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login' Error: Cannot match any routes. URL Segment: 'login' at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError "

my html is :

<button ion-button (click) = "openLogin()" >Efetuar login</button>

my router is :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {
    path: 'login',
    outlet: 'login',
    component: LoginComponent
  },
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

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

I've been researching on the matter and as long as the path corresponds to the path defined in the router there shouldn't be any issue but I keep getting this error.

Upvotes: 5

Views: 738

Answers (2)

Amit Chigadani
Amit Chigadani

Reputation: 29785

Named router-outlet is quite different than normal router-outlet.

This is how named router-outlet works

1.Add outlet to your route object as you are already doing now 

{
    path: 'login',
    outlet: 'login',
    component: LoginComponent
},

2.Add a name attribute to router-outlet tag

 <router-outlet name="login"></router-outlet>

3.Using router.navigate 

this.router.navigate([{ outlets: { login: [ 'login' ] }}]);

4.Using routerLink

[routerLink]="[{ outlets: { login: ['login'] } }]"

I would recommend you to read this post aswell.

Upvotes: 1

Willem van der Veen
Willem van der Veen

Reputation: 36660

Try to implement this in your imports this way:

RouterModule.forRoot(routes, {useHash: true});

instead of:

RouterModule.forRoot(routes)

Upvotes: 1

Related Questions