Core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. - Angular - RESOLVIDO

Front-end
, , ,
#1

Pessoal estou com o seguinte erro.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'usuarioList/%5B'/usuarioAdd'%5D'
Error: Cannot match any routes. URL Segment: 'usuarioList/%5B'/usuarioAdd'%5D'
    at ApplyRedirects.noMatchError (router.js:4295)
    at CatchSubscriber.selector (router.js:4259)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at TapSubscriber._error (tap.js:56)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)

Esse erro ocorre quando eu clico em editar na minha lista de usuários…

Na tabela o código esta assim para fazer a chamada do router:

button routerLink="['usuarioAdd', student.id]" routerLinkActive="router-link-active" class="btn btn-warning">Editar </button>

Percebem que passa o id para o back end trazer os dados desse usuário.

Meu app.modules

import { BrowserModule } from '@angular/platform-browser';
import { Component, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {RouterModule, Routes} from '@angular/router';
import { HomeComponent } from './Home/home.component';
import { AppComponent } from './app.component';
import { ModuleWithProviders } from '@angular/compiler/src/core';
import { LoginComponent } from './Login/login.component';
import { HttpInterceptorModule } from './service/header-interceptor.service';
import { UsuarioComponent } from './componente/usuario/usuario/usuario.component';
import { UsuarioAddComponent } from './componente/usuario/usuario-add/usuario-add.component';
import { MeusDadosComponent } from './componente/usuario/meusdados/meusdados.component';

export const appRouters :Routes = [
  { path : 'home' , component :HomeComponent },
  { path : 'login' , component : LoginComponent },
  { path : '' , component : LoginComponent },
  { path: 'usuarioList', component :UsuarioComponent },
  { path: 'usuarioAdd', component: UsuarioAddComponent },
  { path: 'usuarioAdd/:id', component: UsuarioAddComponent },
  { path: 'minhaConta', component: MeusDadosComponent }
];

export const routes : ModuleWithProviders = RouterModule.forRoot(appRouters)

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    UsuarioComponent,
    UsuarioAddComponent,
    MeusDadosComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    routes,
    HttpInterceptorModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
  
}

Componente usuarioAdd…

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './usuario-add.component.html',
  styleUrls: ['./usuario-add.component.css']
})
export class UsuarioAddComponent implements OnInit {
  
  constructor(private routeActive: ActivatedRoute) {}

  ngOnInit() {
    let id = this.routeActive.snapshot.paramMap.get('id');
    
    if (id != null) {
      console.log("ID SENDO EDITADO " +id)
    }
  }
}

O código nem chega nessa parte, o erro acontece ao clicar no botão, alguém sabe como podemos resolver esse erro?

#2

Como teste, tente adicionar uma barra na rota invocada pelo botão:

<button 
  routerLink="['/usuarioAdd', student.id]" 
  routerLinkActive="router-link-active" 
  class="btn btn-warning"
>
  Editar
</button>

Acho que assim também funciona:

<button 
  routerLink="/usuarioAdd/{{student.id}}" 
  routerLinkActive="router-link-active" 
  class="btn btn-warning"
>
  Editar
</button>

Eu acho que, como não tem a barra, a rota esteja sendo carrega de forma relativa à rota usuarioList. Por isso que no erro ele imprimiu assim:

URL Segment: 'usuarioList/%5B'/usuarioAdd'%5D'
#3

Era isso mesmo, com a sintaxe anterior não estava indo, talvez no curso onde faço o curso deve esta desatualizado ou estou usando uma versão do angular diferente, vlw mano.
Precisei colocar nessa forma para dar certo.

<button 
  routerLink="/usuarioAdd/{{student.id}}" 
  routerLinkActive="router-link-active" 
  class="btn btn-warning"
>
  Editar
</button>
#4

Acho que já usei essa sintaxe (passando um array) e funcionou. Não sei se essa sintaxe foi abandonada (acho difícil) ou se apenas faltou algum detalhes no seu código para funcionar, mas bom que deu certo mano!

#5

Apenas por questão de teste, e se vc puder, tente usar a sintaxe anterior assim:

[routerLink]="['/usuarioAdd', student.id]"

obs.: Apenas adicionar colchetes no routerLink

#6

Puts deu certo, eu não tinha reparado nesse [] no routerLink kkk

#7

Sem as [], o routerLink estava interpretando o valor apenas como uma simples string, por isso estava dando erro.