Uncaught (in Promise): Error: Cannot match any Routes. URL Segment:

Asked

Viewed 8,903 times

1

I am getting the following error when I try to open a new form via [routerLink]:

error_handler.js:54 
EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. 
URL Segment: 'usuario-cadastrar-dialog' Error: Cannot match any routes.
URL Segment: 'usuario-cadastrar-dialog'

HTML page:

<h1>Usuários</h1>

<button type="button" *ngIf="mostrarBotaoNovo"
 [routerLink]="['/', { outlets: { popup: ['usuario-cadastrar-dialog'] } 
 }]"
 class="btn btn-default">
 <i class="fa fa-user" aria-hidden="true"></i> Novo usuário
</button>

user-routing.ts:

import {NgModule} from "@angular/core";
import {RouterModule} from "@angular/router";
import {GerenciarUsuarioComponent} from "./usuario-gerenciar/usuario-gerenciar.component";
import {CadastrarEditarUsuarioDialogComponent} from "./usuario-cadastrar-dialog/usuario-cadastrar-dialog.component";

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'administracao',
        children: [
          {path: 'usuario', component: GerenciarUsuarioComponent},
          {path: 'usuario-cadastrar-dialog', component: CadastrarEditarUsuarioDialogComponent, outlet: 'popup'}
        ]
      }
    ])
  ],
  exports: [RouterModule]
})
export class UsuarioRouting {
}

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PrincipalComponent} from "./principal/principal.component";
import {UsuarioRouting} from "./usuario/usuario-routing";

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: PrincipalComponent
  },

  ...UsuarioRouting
];

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

1 answer

2


I solved the problem. I had forgotten to put the line <router-outlet name="popup"></router-outlet> in my main component "app.component.html". This line is required to indicate where my popup should be rendered. The other files have not been changed. This is my "app.component.html.":

<app-menu-principal *ngIf="mostrarMenu"></app-menu-principal>
<div class="container">
  <router-outlet></router-outlet>
  <router-outlet name="popup"></router-outlet>
</div>

Thank you all for your attention.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.