angularvisual-studio-codecomponentsangular-componentsangular-compiler

I have a problem with components in angular

Hello I'm newbie in Angular and took a course in this framework and I have a problem with an error nd I don't understand how to fix it. import {Component } from '@angular/core';

code: @Component{{ selector: 'contador-app', }} //se le pone export para poder utilzar esta clase fuera de este archivo :3

export class contadorComponent{

}

error message: (alias) const Component: ComponentDecorator import Component Supplies configuration metadata for an Angular component. Component decorator and metadata.

@publicApi

@Annotation

@publicApi

Declaration expected.ts(1146)

Solution

  • It looks like you've accidently used curly brackets twice for the component decorator.

    @Component >{{<
    selector: 'contador-app', >}}<

    A component decorator looks like this:

    @Component({
    selector: 'contador-app',
})

    It is also common to specify the components html file and stylesheet with either templateUrl: 'path to html-file' and styleUrls: ['path to stylesheet'], note that the latter is between brackets as you can specify one or more paths to a stylesheet. There's also the option to write html / css directly in the component decorator using

    template: 'html-code'

    and / or

    styles: 'css-code'.

    Also Purvang raises a good question in the comments on how you went about to create the component? If you did it manually you have to make sure it is imported correctly in to the responsible module as the component needs to be made known by angular when the app is bootstrapped otherwise it wont render. If you are new it may serve better to use the ng generate command to let the CLI generate a component for you it looks like this:

    ng generate component your-component-name

    For more info about decorators i referenced this bloggpost: https://www.netjstech.com/2020/03/angular-component-decorator.html