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

meu navegador não exibe as fotos

quando abro o navegador em http://localhost:4200/user/flavio ou http://localhost:4200/p/add aparece o seguinte erro

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'p/add' Error: Cannot match any routes. URL Segment: 'p/add' at ApplyRedirects.noMatchError (router.js:2628) at CatchSubscriber.selector (router.js:2610) at CatchSubscriber.error (catchError.js:27) 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 ThrowIfEmptySubscriber.error (Subscriber.js:75) at ThrowIfEmptySubscriber.error (Subscriber.js:55) at TakeLastSubscriber.error (Subscriber.js:75) at resolvePromise (zone-evergreen.js:1213) at resolvePromise (zone-evergreen.js:1167) at zone-evergreen.js:1279 at ZoneDelegate.invokeTask (zone-evergreen.js:406) at Object.onInvokeTask (core.js:28564) at ZoneDelegate.invokeTask (zone-evergreen.js:405) at Zone.runTask (zone-evergreen.js:178) at drainMicroTaskQueue (zone-evergreen.js:582) defaultErrorLogger @ core.js:6210

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'user/flavio' Error: Cannot match any routes. URL Segment: 'user/flavio' at ApplyRedirects.noMatchError (router.js:2628) at CatchSubscriber.selector (router.js:2610) at CatchSubscriber.error (catchError.js:27) 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 ThrowIfEmptySubscriber.error (Subscriber.js:75) at ThrowIfEmptySubscriber.error (Subscriber.js:55) at TakeLastSubscriber.error (Subscriber.js:75) at resolvePromise (zone-evergreen.js:1213) at resolvePromise (zone-evergreen.js:1167) at zone-evergreen.js:1279 at ZoneDelegate.invokeTask (zone-evergreen.js:406) at Object.onInvokeTask (core.js:28564) at ZoneDelegate.invokeTask (zone-evergreen.js:405) at Zone.runTask (zone-evergreen.js:178) at drainMicroTaskQueue (zone-evergreen.js:582)

5 respostas

aqui meu código:

app.routing.module.ts

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

import { PhotoFormComponent } from "./photos/photo-form/photo-form.component";
import { PhotoListComponent } from "./photos/photo-list/photo-list.component";


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

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

export class AppRoutingModule { }

photo-list.component.ts

import { Component, OnInit } from '@angular/core';
import { PhotoService } from '../photo/photo.service';

@Component({
  selector: 'app-photo-list',
  templateUrl: './photo-list.component.html',
  styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {

  photos: any[] = [];

  constructor(private photoService: PhotoService) { }

  ngOnInit(): void {

    this.photoService
      .listFromUser('flavio')
      .subscribe(photos => this.photos = photos);

  }

}

photos.module.ts

import { CommonModule } from "@angular/common";
import { HttpClientModule } from "@angular/common/http";
import { NgModule } from "@angular/core";

import { PhotoListComponent } from './photo-list/photo-list.component';
import { PhotoComponent } from "./photo/photo.component";
import { PhotoFormComponent } from './photo-form/photo-form.component';


@NgModule({
    declarations: [PhotoComponent, PhotoListComponent, PhotoFormComponent],
    imports: [HttpClientModule, CommonModule]

})
export class PhotosModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PhotosModule } from './photos/photos.module';
import { AppRoutingModule } from './app-routing.module';


@NgModule({
  declarations: [
    AppComponent

  ],
  imports: [
    BrowserModule,
    PhotosModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<router-outlet></router-outlet>

Fala ai Bianca, tudo bem? Olhando os códigos parece que tudo esta coreto, mas, posso estar deixando facilmente passar algum detalhe.

Sendo assim, vou lhe pedir um favor: Compartilha o projeto completo comigo? Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Boa noite Matheus,

segue o link do meu projeto, por favor tente me ajudar.

https://drive.google.com/drive/folders/1LcxNYPVS0TeG1EsGkd-oz9pyhehGHNqw?usp=sharing

solução!

já resolvi o problema, eu tinha criado duas pastas app.routing.modules.ts... quando apaguei a que estava errado deu tudo certo.

mas obrigada pela ajuda

Boa Bianca, muito bom, não deu tempo de eu olhar o projeto antes.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.