1

Estou obtendo o seguinte erro quando tento abrir um novo formulário 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'

Página HTML:

<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>

usuario-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 Resposta 1

2

Resolvi o problema. Eu havia esquecido de colocar a linha <router-outlet name="popup"></router-outlet> no meu componente principal "app.component.html". Essa linha é necessária para indicar onde o meu popup deve ser renderizado. Os demais arquivos não foram alterados. Ficou assim o meu arquivo "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>

Obrigado a todos pela atenção.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .