Handling Duplicate Identifier Error in Angular

Environment

Product

Progress® Kendo UI® for Angular

Description

A Duplicate identifier error occurs when importing multiple components, such as Kendo UI's Grid and TreeList, that use events with the same event names in an Angular application.

Cause

Components like Kendo UI for Angular Grid and TreeList use the same event names (e.g., RowReorderEvent), causing a conflict when both are imported into the same component.

typescript

import { RowReorderEvent } from '@progress/kendo-angular-grid';
import { RowReorderEvent } from '@progress/kendo-angular-treelist';

// Error: Duplicate identifier 'RowReorderEvent'.

export class AppComponent {
    public gridRowReorder(event: RowReorderEvent) {
        console.log(event);
    }
    public treeListRowReorder(event: RowReorderEvent) {
        console.log(event);
    }
}

Solution

Use import alias when importing the components to avoid the Duplicate identifier error.

typescript

import { RowReorderEvent as GridRowReorderEvent } from '@progress/kendo-angular-grid';
import { RowReorderEvent as TreeListRowReorderEvent } from '@progress/kendo-angular-treelist';

export class AppComponent {
    public gridRowReorder(event: GridRowReorderEvent) {
        console.log(event);
    }
    public treeListRowReorder(event: TreeListRowReorderEvent) {
        console.log(event);
    }
}

See Also

• Differences Between Type Aliases and Interfaces in TypeScript
• Grid Overview
• TreeList Overview