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

Erro ao criar novo component

Referente ao curso Angular parte 1: produtividade e organização com framework SPA, no capítulo Criando o primeiro componente e atividade Criando o primeiro componente

por Kaique Silva
| 348.2k xp | 20 posts

Estou recebendo o seguinte erro ao tentar criar o novo selector na classe photo.component Erro na propriedade: 

TSLint: The selector of the component "PhotoComponent" should have prefix "app" (https://angular.io/styleguide#style-02-07) (component-selector)

onde o mesmo solicita que eu altera o arquivo TsLint:

{
    "extends": "../tslint.json",
    "rules": {
        "directive-selector": [
            true,
            "attribute",
            "app",
            "camelCase"
        ],
        "component-selector": [
            true,
            "element",
            "app",
            "kebab-case"
        ]
    }
}

E o seguinte erro é apresentado no terminal

ERROR in src/app/photo/photo.component.ts(3,2): error TS2560: Value of type 'typeof PhotoComponent' has no properties in common with type 'Component'. Did you mean to call it?
5 respostas
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala aí Kaique, beleza? Você está criando o componente na mão ou através do cli do angular?

Se estiver criando na mão, consegue colar o código do componente?

Se estiver criando através do cli, cola o comando que está executando.

Fico no aguardo.

por Kaique Silva
| 348.2k xp | 20 posts

Criei manualmente.

import { Component } from '@angular/core';

@Component({
  selector: 'ap-photo',
  templateUrl: 'photo.component.html'
})
export class PhotoComponent {
  descripition = 'logo';
  url = 'http://cdn5.colorir.com/desenhos/color/201813/leao-tribal-animais-a-selva-1456863.jpg';
}

O erro é apresentado no nome do selector

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Apenas para fazer um teste, no seu seletor coloque app-photo.

por Kaique Silva
| 348.2k xp | 20 posts

Colocando app ele retorna um erro diferente

ng: Component 'PhotoComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration

E passa a apresentar erro no .html também.

ng: 'app-photo' is not a known element: 1. If 'app-photo' is an Angular component, then verify that it is part of this module. 2. If 'app-photo' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
solução!
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Certo, agora você precisa adicionar o PhotoComponent dentro de declarations do app.module.ts, isso é explicado no próximo vídeo.