Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:

Pessoal boa tarde! Não tô conseguindo sair desse exercício, fiz tudo certinho mas continua dando esse mesmo problema.

App Routing Module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { PhotosListComponent } from './photos/photos-list/photos-list.component';
import { PhotoFormComponent } from './photos/photo-form/photo-form.component';

const routes: Routes = [
  { path: 'user/flavio', component: PhotosListComponent },
  { path: 'p/add', component: PhotoFormComponent }
];

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

export class AppRoutingModule { }

Link para a src do meu projeto completo:

https://github.com/amandavitoriaav/curso-alura/blob/master/Amanda%20--%20Angular%20Alurapic%20-%20src%20--.zip

8 respostas

Fala aí Amanda, tudo bem? Vamos lá:

Você importou o AppRoutingModule no seu app.module principal?

Você adicionou o componente <router-outlet></router-outlet> eu seu app.component.html?

Espero ter ajudado, bons estudos.

Boa tarde Matheus. Sim fiz tudo isso, mesmo assim continua sem funcionar.

Boa tarde, Amanda! Como vai?

Esse erro ocorre quando vc tenta acessar qual URL?

Boa tarde Gabriel.

Sim esse erro aparece no console do chrome quando tento acessar a URL: user/flavio ou p/add.

Consegue compartilhar os códigos do seu projeto? Ficaria mais facil para entender e ajudar com o problema.

Fico no aguardo.

solução!

Olá Amanda. Tive o mesmo problema que o seu, e consegui resolver.

Vi que no app.module.ts eu havia importado o AppRoutingModule errado:

import { AppRoutingModule } from './app-routing.module';

Se for reparar eu coloquei app-routing, e o certo é app.routing. Que fica desta forma:

import { AppRoutingModule } from './app.routing.module';

Além disso, confere também como está nomeada a sua pasta photo-list. Pois vi que no arquivo app.routing.module.ts você está importando assim (photos no plural):

import { PhotosListComponent } from './photos/photos-list/photos-list.component';

E se você nomeou as pastas corretamente como mostrado nos vídeos, deveria ser assim:

import { PhotoListComponent } from './photos/photo-list/photo-list.component';

Obrigado pelo dica, Graziela :)

Olá Graziela, era esse o problema mesmo. Nossa ajudou demais.

Muito obrigada pela ajuda! ;)