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

Uncaught Error: Template parse errors: Can't bind to 'photoId' since it isn't a known property of 'ap-photo-comments'.

Estou tendo um erro que ainda não consegui resolver:

Uncaught Error: Template parse errors:
Can't bind to 'photoId' since it isn't a known property of 'ap-photo-comments'.
1. If 'ap-photo-comments' is an Angular component and it has 'photoId' input, then verify that it is part of this module.
2. If 'ap-photo-comments' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
        </small>

        <ap-photo-comments [ERROR ->][photoId]="photoId"></ap-photo-comments>
        <div class="mt-4">
          <form>
"): ng:///PhotoDetailsModule/PhotoDetailsComponent.html@12:27
    at syntaxError (compiler.js:1021)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14830)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
    at compiler.js:23948
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
    at compiler.js:23858
    at Object.then (compiler.js:1012)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)

Ele não está aceitando o [photoId]="photoId" de <ap-photo-comments [photoId]="photoId"></ap-photo-comments>

Segue o código para vossa inspeção:

<div class="bg-white border" *ngIf="(photo$ | async) as photo">
    <div class="row">
      <div class="col-lg-8">
        <ap-photo [url]="photo.url" [description]="photo.description"></ap-photo>
      </div>

      <div class="col-lg-4 p-4">
        <small>
          <p class="text-left break-word">{{photo?.description}}</p>
          <hr>
        </small>

        <ap-photo-comments [photoId]="photoId"></ap-photo-comments>
        <div class="mt-4">
          <form>
            <div class="input-group">
              <textarea class="form-control"></textarea>
              <div class="input-group-append">
                <button class="btn btn-primary pull-left">Publish</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
import { NgModule } from '@angular/core';
import { PhotoDetailsComponent } from './photo-details.component';
import { CommonModule } from '@angular/common';
import { PhotoModule } from '../photo/photo.module';
import { PhotoCommentsComponent } from './photo-comments/photo-comments.component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [ PhotoDetailsComponent, PhotoCommentsComponent ],
    exports: [ PhotoDetailsComponent, PhotoCommentsComponent ],
    imports: [CommonModule, PhotoModule, RouterModule]
})
export class PhotoDetailsModule {}
import { Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { PhotoService } from '../../photo/photo.service';
import { PhotoComment } from "../../photo/photo-comment";

@Component({
    selector: 'ap-photo-comments',
    templateUrl: './photo-comments.component.html'
})
export class PhotoCommentsComponent implements OnInit {

    @Input() photoId: number;

    comments$: Observable<PhotoComment[]>;

    constructor(private photoService: PhotoService) {}

    ngOnInit(): void {

        this.comments$ = this.photoService.getComments(this.photoId);
    }
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PhotoService } from '../photo/photo.service';
import { Photo } from '../photo/photo';
import { Observable } from 'rxjs';

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

    photo$: Observable<Photo>;
    photoId: number;

    constructor(private route: ActivatedRoute, private photoService: PhotoService) {}

    ngOnInit(): void {
       this.photoId = this.route.snapshot.params.photoId;
       this.photo$ = this.photoService.findById(this.photoId);     
    }
}
6 respostas

Tenho uma certa urgência na resolução deste tópico, então gostaria de uma resposta o mais breve possível.

Fala ai Mauricio, tudo bem? Olhando os códigos eles parecem corretos, seu componente tem um módulo, a propriedade photoId está declarada como @Input.

Tente parar o servidor do Angular e subir novamente, pode ser algum cache que ele não tenha atualizado.

Espero ter ajudado.

solução!

Não acredito! Era isso mesmo. O cache. Quando subi de novo funcionou!

Sabe por que eu duvidava que fosse isso? Porque quando eu estava testando eu testei tirar e colocar o trecho [photoId]="photoId" e ele funcionou sem o mesmo e quando recoloquei voltou pro mesmo erro, daí eu achava que o cache já tinha renovado, engano meu. Fica aí a lição.

Boa Mauricio, fico feliz que tenha dado certo.

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

Abraços e bons estudos.

Tem algum jeito de limpar o cache com ele e em execução?

Fala Mauricio, você pode tentar desabilitar o cache do navegador ou dar uma force refresh na página (shift + F5).

Caso isso não dê certo, normalmente eu paro e subo o servidor, já era.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software