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

5
votes

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.

2
javascriptangularrouting
forgot to show my class with the function openLogin(), here it is :import { Component } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-balances', templateUrl: 'balances.page.html', styleUrls: ['balances.page.scss'] }) export class BalancesPage { constructor(private router: Router, private route: ActivatedRoute){ } openLogin(): void { alert("login");this.router.navigate(['./login']); }} - AnaCS
are you having ./login as the path in router.navigate? - yer
I don't like the "." in navigate(["./login"], try navigate(["/login"]) - Eliseo

2 Answers

1
votes

Try to implement this in your imports this way:

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

instead of:

RouterModule.forRoot(routes)
1
votes

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.