Entrar Ainda não tem acesso?
6
respostas

'foto' is not a known element

Referente ao curso Angular 2: webapps ainda mais poderosas parte 1, no capítulo Criando mais componentes e atividade Novo componente

por Daniel Augusto
| 78.4k xp | 26 posts

Estou recebendo o seguinte erro:

Error: Uncaught (in promise): Error: Template parse errors:
'foto' is not a known element:
1. If 'foto' is an Angular component, then verify that it is part of this module.
2. If 'foto' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<h1 class="text-center">Alurapic</h1>

[ERROR ->]<foto></foto>"): AppComponent@1:0
Stack trace:
resolvePromise@http://localhost:3000/node_modules/zone.js/dist/zone.js:418:31
resolvePromise@http://localhost:3000/node_modules/zone.js/dist/zone.js:403:17
scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:451:17
ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:225:23
Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:125:28
drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:357:25
ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:297:25

Já derrubei o servidor e levantei novamente, mas não funcionou.

Seguem meus arquivos:

app/foto/foto.module.ts 

import { NgModule }      from '@angular/core';
import { FotoComponent } from './foto.component';

@NgModule({
  declarations: [ FotoComponent ],
  exports: [FotoComponent]
})
export class FotoModule { }

app/foto/foto.component.ts

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

@Component ({
    selector : 'foto',
    templateUrl : './foto.component.html'
})

export class FotoComponent {}

app/foto/foto.component.html

<img class="img-responsive center-block" src="img/leao.jpg" alt="Leão"/>

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { FotoModule }    from './foto/foto.module';

@NgModule({
  imports:      [ BrowserModule, FotoModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app/app.component.html

<h1 class="text-center">Alurapic</h1>
<foto></foto>
6 respostas
por Elielson Junior
| 109.2k xp | 1 posts

Daniel, no foto.component.ts você não usou a URL Absoluta (/app/foto/foto.component.html) para indicar a localização do seu template e não adicionou a propriedade moduleId passando como valor o module.id.

Acredito que o problema seja essa.

Como deveria ser (passando o caminho relativo do template e usando o moduleId):

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

@Component ({
    moduleId: module.id,
    selector : 'foto',
    templateUrl : './foto.component.html'
})
export class FotoComponent {}
por Daniel Augusto
| 78.4k xp | 26 posts

Opa Elielson,

Tentei o que você mostrou, mas não funcionou.

Copiei os trechos da aula (https://cursos.alura.com.br/course/angular2-parte1/task/21364), mas também não funcionou.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Pode ficar tranquilo que mais de 500 alunos passaram dessa parte sem problema algum. Você achar o problema.

Só confirma se você estava rodando o compilador do TypeScript e se os arquivos então em sua devida pasta e se esta usando a versão do angular que disponibilizei no curso. Inclusive se esta acessando o projeto pelo localhost e não pelo arquivo diretamente.

por Ricardo Ropelli Pena
| 178.7k xp | 14 posts
Engenheiro de Software

no arquivo app/foto/foto.module.ts a parte de declarations não deveria ser o nome da propria classe (FotoModule) ?

por Rafael Reynold
| 30.4k xp | 2 posts

O meu caso funcinou vou passar o código

<!-- alurapic/client/app/foto/foto.component.html -->
<img class="img-responsive center-block" src="img/leao.jpg" alt="Leão">

foto.component.ts

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

@Component({
    selector: 'foto',
    templateUrl: './app/foto/foto.component.html'
})
export class FotoComponent {}

foto.module.ts

import { NgModule }      from '@angular/core';
import { FotoComponent }   from './foto.component';

@NgModule({
  declarations: [ FotoComponent ],
  exports: [FotoComponent]
})
export class FotoModule { }

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { FotoModule } from './foto/foto.module';

@NgModule({
  imports:      [ BrowserModule, FotoModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Caso não tenha funcionado me passa o teu email que eu te passo o fonte, estou justamente nessaparte, e fiz um branch separado para este caso, se vc precisar.

por Rafael Reynold
| 30.4k xp | 2 posts

Acho que encontrei o problema: em foto.component.ts trocando

templateUrl : './foto.component.html'

por 

templateUrl: './app/foto/foto.component.html'

deva funcionar