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

Erro de compilação

na compilação: ng serve --open

ERROR in ./src/app/photo/photo.component.js Module parse failed: Unexpected character '@' (3:0) You may need an appropriate loader to handle this file type. | import { Component } from "@angular/core"; | | @Component({ | selector: 'ap-photo',

templateUrl: 'photo.component.html'

1)photo.component.js 1.1) obs: para mim não aparece "autocomplete" 1.2) deu erro na linha "export class PhotoComponent {" em "PhotoComponent " configurei : VSCode -> Preferences -> Settings Searsh settings:javascript.implicitProjectConfig.experimentalDecorators marcar check

1.3) Código:

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

@Component({ selector: 'ap-photo', templateUrl: 'photo.component.html' }) export class PhotoComponent { description = 'Leão';

url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Sultan_the_Barbary_Lion.jpg/440px-Sultan_the_Barbary_Lion.jpg';

}

2)photo.component.html

2.1)Código:

<img class="img-thumbnail" [src]="url" [alt]="description">

3) app.module.ts 3.1) na linha import { PhotoComponent } from './photo/photo.component';

não é aceito o link com a pasta do componente. dá os eguinte erro:

Could not find a declaration file for module './photo/photo.component'. 'c:/dados/Leo/CURSO_ALURA/projetos/alurapic/src/app/photo/photo.component.js' implicitly has an 'any' type.ts(7016)

tentei resolver executando:

npm install --save @types/react-router

3.2) Código:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppComponent } from './app.component'; import { PhotoComponent } from './photo/photo.component';

@NgModule({ declarations: [ AppComponent, PhotoComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] })

export class AppModule { }

4.1) app.component.html código: 5) observação: os arquivos do componente novo estão criados na pasta "photo" dentro de "app"

o que devo fazer?

2 respostas

CORRIGINDO CÓDIGO: photo.component.js import { Component } from "@angular/core";

@Component({ selector: 'ap-photo', templateUrl: 'photo.component.html' }) export class PhotoComponent { description = 'Leão';

url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Sultan_the_Barbary_Lion.jpg/440px-Sultan_the_Barbary_Lion.jpg';

}

solução!

resolvi: criei o qrauivo "photo.component.js" e não "photo.component.ts"