5
respostas

Fotos não carregam

Acredito ter feito todos os passos corretamente, porém ao acessar localhost:4200/user/flavio ou localhost:4200/p/add, fica somente em branco:

app.routing.module.ts:

import { NgModule } from '@angular/core';
import {Routes, RouterModule, Router} 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 { }

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

Fala aí Diego, tudo bem? Por estar ficando branco, talvez esteja dando algum erro no console, consegue verificar?

Olhando o código, parece estar correto.

Fico no aguardo.

Tudo bem, segue o que aparece no console:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'user/flavio'
Error: Cannot match any routes. URL Segment: 'user/flavio'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
defaultErrorLogger @ core.js:15724

Alguma sugestão ?

??????

Boa noite, Diego! Como vai!

O erro apontado no console indica que o Angular não está conseguindo acessar a sua rota. O que é estranho, pois aparentemente está tudo correto, como vc mesmo falou!

Faz o seguinte: vc poderia colocar o seu projeto no github? Aí eu poderei dar uma olhada melhor no que está acontecendo!

Grande abraço e bons estudos, meu aluno!