Angular - Duplicate Identifier "Input'

Question

My component code is below

import {Component, EventEmitter, OnInit, Input, Output} from '@angular/core';
import {Input} from '@angular/compiler/src/core';

@Component({
    selector: 'like',
    templateUrl: './like.component.html',
    styleUrls: ['./like.component.css']
})
export class LikeComponent implements OnInit {
    @Input('isActive') isSelected: boolean;
    @Input('likesCount') likesCount: number;
    @Output('change') click = new EventEmitter();


    constructor() {}
    ngOnInit() {}

    isLiked() {}

    onClick() {
    //Ignore below incomplete code 
        if (!this.isSelected) {

        } else {

        }
        this.isSelected = !this.isSelected;
        this.click.emit({newValue: this.isSelected});
    }

    getStyle() {
        let style: string;
        if (this.isSelected) {
            style = 'deeppink';
        } else {
            style = '#ccc';
        }
        return style;
    }
}

export interface LikeChangedEventArgs {
    newValue: boolean;
}

.glyphicon-heart{
    font-size: 50px;
    color: #cccccc;
    cursor: pointer;
}

<span class="glyphicon glyphicon-heart"
      (click)="onClick()" [style.color]="getStyle()">
</span>
<span style="font-size: 50px;">{{likesCount}}</span>

My tsconfig.json is below

{   "compileOnSave": false,   "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]   },   "exclude": [
    "bower_components/**",
    "node_modules/**",
    "typings/main.d.ts",
    "typings/main/**",
    "typings/index.d.ts"   ] }

However whenever I do

ng serve

I get the below errors

src/app/like/like.component.ts(1,42): error TS2300: Duplicate identifier 'Input'. src/app/like/like.component.ts(2,9): error TS2300: Duplicate identifier 'Input'.

i ｢wdm｣: Failed to compile.

I tried all combinations in tsconfig.json but nothing seems to work. Weirdly, just changing spaces in the like.component.ts file seems to work.

Answer 1

You are importing Input twice, remove the second import.