Angular2：未捕获的ReferenceError

Question

My data-table.component.ts has reference of TableSorting which is also defined in the same file.

When i run my application in console i get following error:

Uncaught ReferenceError: TableSorting is not defined at line 54 which is

@Input() sorting: TableSorting;

import {
    Component,
    Output,
    Input,
    EventEmitter,
    OnChanges,
    SimpleChange, NgModule,
    NgZone
} from '@angular/core';
import { IconComponent } from '../icon';
import { CheckboxComponent, CheckboxEvent } from '../checkbox';
import { DataField, DataType, EditType } from '../../models';
import {
    SortPipe,
    NumberDelimiterPipe,
    RangePipe,
    HighlighterPipe,
    SafeHTMLPipe
} from '../../pipes';

@Component({
    selector: 'data-table',
    templateUrl: './data-table.component.html',
    styleUrls: ['./data-table.component.css']
})

@NgModule({
    declarations: [
        CheckboxComponent, IconComponent, SortPipe, Range, NumberDelimiterPipe, HighlighterPipe, SafeHTMLPipe
    ]
})
export class DataTableComponent implements OnChanges {

    public activeColor: string = '#2196f3';
    public inactiveColor: string = 'grey';

    @Input() columns: DataField[];
    public visibleColumns: DataField[];
    @Input() selectColumns: boolean = false;

    @Input() data: Object[];
    public tableData: DataWrapper[];

    @Input() startAt: number;
    @Input() visibleEntries: number;
    @Output() startAtChange: EventEmitter<number> = new EventEmitter<number>();

    @Input() selectable: boolean;
    @Input() selected: Set<Object> = new Set<Object>();
    @Input() allSelected: boolean = false;
    @Input() selectMax: number = 0;
    @Output() selectedChange: EventEmitter<Set<Object>> = new EventEmitter();

    @Input() sorting: TableSorting;
    @Output() sortingChange: EventEmitter<TableSorting> = new EventEmitter();

    @Input() showIndex: boolean = true;
    @Input() evenOdd: string = 'odd';
    @Input() highlight: string = '';
    @Input() editable: boolean = true;

    private zone: NgZone;
    constructor(zone: NgZone) {
        this.zone = zone;
    }

    getEvenClass(index: number): string {
        if (this.evenOdd === 'even' && index % 2) {
            return 'table-row even'
        }
        else if (this.evenOdd === 'odd' && !(index % 2)) {
            return 'table-row odd';
        }
        else {
            return 'table-row';
        }
    }

    ngOnChanges(changes: any) {
        if (changes.data instanceof SimpleChange) {
            var data = new Array<DataWrapper>();
            this.data.forEach(
                function (dataSet: any) {
                    if (dataSet['selected'] !== undefined) {
                        data.push(new DataWrapper(dataSet, dataSet['selected']));
                    } else {
                        data.push(new DataWrapper(dataSet));
                    }
                }
            );
            this.tableData = data;
        }
        if (changes.columns instanceof SimpleChange) {
            this.updateVisibleColumns();
        }
    }

    public updateVisibleColumns() {
        if (this.columns !== undefined) {
            var visibleColumns: Array<DataField> = new Array<DataField>();
            for (var i = 0; i < this.columns.length; i++) {
                var column = this.columns[i];
                if (column.visible) {
                    visibleColumns.push(column);
                }
            }
            this.visibleColumns = visibleColumns;
        }
    }

    public changeSorting(column: DataField) {
        if (this.sorting.column === column) {
            this.sorting.asc = !this.sorting.asc;
        } else {
            this.sorting = new TableSorting(true, column);
        }
        this.tableData = this.tableData.slice(0);
        this.sortingChange.emit(this.sorting);
    }

    private toggleWrap(tableData: DataWrapper[], set: DataWrapper, event: MouseEvent) {
        if (event.ctrlKey) {
            var value: string = (set.wrap === '') ? DataWrapper.WRAP_CLASS : '';
            tableData.forEach((set: DataWrapper) => {
                set.wrap = value;
            });
            this.tableData = tableData.slice(0);
        } else {
            set.toggleWrap();
        }
    }

    // All about selection #########################################################
    public updateAllSelected(): boolean {
        this.allSelected = this.selected.size === this.tableData.length || this.selected.size === this.selectMax;
        return this.allSelected;
    }

    public toggleSelectAll(newAllSelect: any) {
        this.selected = new Set<Object>();
        var max = (this.selectMax > 0 && this.selectMax < this.tableData.length && newAllSelect) ? this.selectMax : this.tableData.length;
        for (var i = 0; i < max; i++) {
            this.tableData[i].selected = newAllSelect;
            if (this.tableData[i].selected) {
                this.selected.add(this.tableData[i].dataSet);
            }
        }
        this.reachedMaxSelectable();
        this.selectedChange.emit(this.selected);
    }

    private lastChecked: DataWrapper;
    public selectedDataSet(set: DataWrapper, event: CheckboxEvent) {
        if (event.checkEvent.shiftKey) {
            this.selectDataSetsFromTo(this.lastChecked, set, event.checked);
        }
        else if (event.checked) {
            set.selected = event.checked;
            this.selected.add(set.dataSet);
        } else {
            set.selected = event.checked;
            this.selected.delete(set.dataSet);
        }
        this.reachedMaxSelectable();

        this.lastChecked = set;
        this.updateAllSelected();
        this.selectedChange.emit(this.selected);
    }

    public maxSelected: boolean = false;
    private reachedMaxSelectable() {
        this.maxSelected = this.selected.size >= this.selectMax;
        return this.maxSelected;
    }

    private selectDataSetsFromTo(first: DataWrapper, last: DataWrapper, value: boolean) {
        var firstIndex: number, lastIndex: number;
        for (var i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i] === first) {
                firstIndex = i;
            } else if (this.tableData[i] === last ||
                (i - firstIndex === this.selectMax)) {
                lastIndex = i;
            }
            if (firstIndex !== undefined && lastIndex !== undefined) {
                i = this.tableData.length;
            }
        }
        if (firstIndex > lastIndex) {
            var index = firstIndex;
            firstIndex = lastIndex;
            lastIndex = index;
        }
        var toBeOrNotToBe: any;
        if (value) {
            toBeOrNotToBe = function (data: any, set: Set<Object>) {
                set.add(data);
            }
        } else {
            toBeOrNotToBe = function (data: any, set: Set<Object>) {
                set.delete(data);
            }
        }
        for (var i = firstIndex; i < lastIndex; i++) {
            if ((value && !this.reachedMaxSelectable()) || !value) {
                this.tableData[i].selected = value;
                toBeOrNotToBe(this.tableData[i].dataSet, this.selected);
            }
        }
        this.updateAllSelected();
    }

    /** boolean values used to enable drag select. */
    private mouseDownChecked: boolean = false;
    private mouseIsDown: boolean = false;

    private static ROW_CLASS_ON_DRAG_SELECT: string = 'onselecting';
    private static ROW_CLASS: string = '';
    private rowClass: string = DataTableComponent.ROW_CLASS;

    dragStart(dataSet: DataWrapper) {
        this.rowClass = DataTableComponent.ROW_CLASS_ON_DRAG_SELECT;
        this.mouseDownChecked = dataSet.selected;
        this.mouseIsDown = true;
    }

    mouseOver(dataSet: DataWrapper) {
        if (this.mouseIsDown && dataSet.selected === this.mouseDownChecked) {
            if (!this.mouseDownChecked) {
                if (this.reachedMaxSelectable()) {
                    return;
                }
                this.selected.add(dataSet.dataSet);
            } else {
                this.selected.delete(dataSet.dataSet);
                this.reachedMaxSelectable();
            }
            dataSet.selected = !this.mouseDownChecked;
            dataSet.checked = true;
            this.updateAllSelected();
        }
    }

    dragEnd() {
        this.rowClass = DataTableComponent.ROW_CLASS;
        this.tableData.forEach((dataSet: DataWrapper) => {
            dataSet.checked = false;
        });
        this.mouseDownChecked = false;
        if (this.mouseIsDown) {
            this.selectedChange.emit(this.selected);
        }
        this.mouseIsDown = false;
        this.updateAllSelected();
    }


    // ########## Handles Editing if enabled #################
    editInstance: Edit = new Edit();
    openEdit: boolean = false;
    editDataSet: any;
    @Output() edited: EventEmitter<Object> = new EventEmitter<Object>();

    edit(instance: Object) {
        this.editDataSet = instance;
        var edit = new Edit();
        edit.instance = instance;
        edit.dataFields = this.columns;

        this.openEdit = true;
        this.editInstance = edit;
    }
    getKeyLabelMap(columns: DataField[]): Map<string, string> {
        var map: Map<string, string> = new Map<string, string>();
        for (var i = 0; i < columns.length; i++) {
            var column = columns[i];
            if (column.editable) {
                map.set(column.value, column.label);
            }
        }
        return map;
    }
    doneEditing(instance: Object) {
        this.openEdit = false;
        this.editDataSet = instance;
        this.edited.emit(instance);
    }
    cancelEditing() {
        this.openEdit = false;
        this.editInstance = new Edit();
    }
}

class Edit {
    public instance: Object;
    public dataFields: Array<Object>;
    constructor() {
        this.dataFields = new Array<Object>();
    }
}

 export class TableSorting {
    public asc: boolean = true;
    public column: DataField = new DataField('', '');
    constructor(asc: boolean, column: DataField) {
        this.asc = asc;
        this.column = column;
    }
}

class DataWrapper {
    public dataSet: Object;
    public selected: boolean;
    public checked: boolean = false;
    public wrap: string = '';
    public static WRAP_CLASS = 'full';

    constructor(dataSet: Object, selected: boolean = false) {
        this.dataSet = dataSet;
        this.selected = selected;
    }
    public toggleWrap() {
        if (this.wrap === '') {
            this.wrap = DataWrapper.WRAP_CLASS;
        } else {
            this.wrap = '';
        }
    }

}

I am not able to find out why this error(in console) is coming. Please help me with the same.

Thanks.

Answer 1

Move the class TableSorting to the top of the file. It is being used before it is created.