Entrar Ainda não tem acesso?
1
resposta

Erro no routerLink / app-cartao / app-animal

Referente ao curso Angular: controle o fluxo de navegação, no capítulo Lista de animais e atividade Lista de animais

por Adalberto Teshima Junior
| 33.2k xp | 7 posts

O meu código não está reconhecendo o routerLink, o app-cartao e o app-animal.

Segue imagens de cada erro abaixo

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade grade-fotos-animais.component.html

<p class="text-center text-muted" *ngIf="!animais.length">
  Desculpe não há animais
</p>

<div class="row">
  <div *ngFor="let animal of animais" class="col-4">
    <a [routerLink]="['/animais', animal.id]"></a>
    <app-cartao>
      <app-animal
        [url]="animal.url"
        [descricao]="animal.description"
      ></app-animal>
      <i aria-hidden="true" class="fa fa-heart-o fa-1x mr-2">{{
        animal.likes
      }}</i>
      <i aria-hidden="true" class="fa fa-comment-o fa-1x mr-2 ml-2">{{
        animal.comments
      }}</i>
    </app-cartao>
  </div>
</div>

animais.module.ts

import { AnimalComponent } from './animal/animal.component';
import { CartaoModule } from './../componentes/cartao/cartao.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AnimaisRoutingModule } from './animais-routing.module';
import { ListaAnimaisComponent } from './lista-animais/lista-animais.component';


@NgModule({
  declarations: [
    ListaAnimaisComponent,
    AnimalComponent
  ],
  imports: [
    CommonModule,
    AnimaisRoutingModule,
    CartaoModule,
  ]
})
export class AnimaisModule { }
1 resposta
por Rafael Rocha
| 2627.1k xp | 5568 posts
Alura Scuba Team Time Alura | Apoio Educacional no Fórum

Olá Adalberto, tudo bem com você?

Peço desculpas pela demora em obter um retorno.

O erro, Can't bind to 'routerlink' since it isn't a known property of 'a'. ngtsc(-998002) está informando que o Angular não reconhece o atributo routerlink como uma propriedade válida, já os erros 'app-cartao' is not a known element e 'app-animal' is not a known element está informando que os elementos app-cartao e app-animal não são reconhecidos como um elemento.

Para que routerLink, app-cartao e app-animal sejam reconhecidos, será necessário adicionar o componente GradeFotosAnimaisComponent no array do atributo declarations presente no arquivo animais.module.ts, ficando da seguinte forma:

import { GradeFotosAnimaisComponent } from './grade-fotos-animais/grade-fotos-animais.component';

@NgModule({
  declarations: [ListaAnimaisComponent, AnimalComponent, GradeFotosAnimaisComponent],
  imports: [CommonModule, AnimaisRoutingModule, CartaoModule],
})
export class AnimaisModule {}

Importante: Lembre-se de realizar a importação do componente para o arquivo animais.module.ts.

Após realizar a modificação do arquivo, salve-o e reinicie a aplicação executando o comando ng serve.

Espero ter ajudado. Continue mergulhando em conhecimento e não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!