调用节点模块失败，并显示以下错误：错误：未捕获（按承诺）：TypeError：无法读取未定义的属性“ toLowerCase”

Question

I am using AngularJS and Typesctipt with ASP.Net Core template on VS2017. I have added ng2-table in one of my webpage.

My app.module.shared.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Ng2TableModule } from 'ng2-table/ng2-table';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { FiesaGridComponent } from './components/Grid/fiesaGrid.component';

export const sharedConfig: NgModule = {
    bootstrap: [ AppComponent ],
    declarations: [
        FiesaGridComponent,
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'Fiesa', component: FiesaGridComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        Ng2TableModule,
        Ng2BootstrapModule.forRoot()
    ]
};

Grid HTML

<ng-table [config]="config"
      (tableChanged)="onChangeTable(config)"
      (cellClicked)="onCellClick($event)"
      [rows]="rows" [columns]="columns">
</ng-table>

My Component ts file is following:

    import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'fiesaGrid',
    templateUrl: './fiesaGrid.component.html',
})  

export class FiesaGridComponent
{
    public page: number = 1;
    public itemsPerPage: number = 10;
    public rows: Array<any> = [];
    public columns: Array<any> = [
        { title: 'Name', name: 'name', filtering: { filterString: '', placeholder: 'Filter by name' } },
        {
            title: 'Position',
            name: 'position',
            sort: false,
            filtering: { filterString: '', placeholder: 'Filter by position' }
        },
        { title: 'Office', className: ['office-header', 'text-success'], name: 'office', sort: 'asc' },
        { title: 'Extn.', name: 'ext', sort: '', filtering: { filterString: '', placeholder: 'Filter by extn.' } },
        { title: 'Start date', className: 'text-warning', name: 'startDate' },
        { title: 'Salary ($)', name: 'salary' }
    ];


    public config: any = {
        paging: true,
        sorting: { columns: this.columns },
        filtering: { filterString: '' },
        className: ['table-striped', 'table-bordered']
    };

    private data: Array<any> = [
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position1', office: 'office1' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position2', office: 'office2' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position3', office: 'office3' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' },
        { name: 'Name', salary: 'Salary', startDate: 'SomeDate', ext: 'ext', position: 'position', office: 'office' }
    ];

    public constructor() {
        this.length = this.data.length;
    }

    public ngOnInit(): void {
        this.onChangeTable(this.config);
    }

    public onChangeTable(config: any, page: any = { page: this.page, itemsPerPage: this.itemsPerPage }): any {
        this.rows = this.data;
    }
}

Now the moment I refresh the page throws following exception:

Exception: Call to Node module failed with error: Error: Uncaught (in promise): TypeError: Cannot read property 'toLowerCase' of undefined
        TypeError: Cannot read property 'toLowerCase' of undefined
        at DefaultServerRenderer2.setProperty (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\main-server.js:11685:54)
        at RendererAdapter.module.exports.RendererAdapter.setElementProperty (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:21232:23)
        at setProperty (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\main-server.js:7569:14)
        at new NgTableFilteringDirective (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\main-server.js:7581:9)
        at createClass (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:21631:26)
        at createDirectiveInstance (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:21459:37)
        at createViewNodes (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:22822:49)
        at Object.createEmbeddedView (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:22715:5)
        at TemplateRef_.module.exports.TemplateRef_.createEmbeddedView (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:21040:38)
        at ViewContainerRef_.module.exports.ViewContainerRef_.createEmbeddedView (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:20832:52)
        at resolvePromise (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83659:31)
        at resolvePromise (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83630:17)
        at C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83707:17
        at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83316:31)
        at Object.onInvokeTask (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:14877:37)
        at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83315:36)
        at Zone.module.exports.Zone.runTask (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83083:47)
        at drainMicroTaskQueue (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83476:35)
        at ZoneTask.invoke (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:83382:25)
        at data.args.(anonymous function) (C:\BitBucket\Animesh\Research\DotNetCoreSampleApp\DotNetCorAngulate\ClientApp\dist\vendor.js:84294:25)
        Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+<InvokeExportAsync>d__7.MoveNext()

Section of the main-server.js from where exception occured:

DefaultServerRenderer2.prototype.setProperty = function (el, name, value) {
    checkNoSyntheticProp(name, 'property');
    _angular_platformBrowser.ɵgetDOM().setProperty(el, name, value);
    // Mirror property values for known HTML element properties in the attributes.
    var /** @type {?} */ tagName = ((el.tagName)).toLowerCase(); // Exception occured on this line
    if (value != null && (typeof value === 'number' || typeof value == 'string') &&
        this.schema.hasElement(tagName, EMPTY_ARRAY) &&
        this.schema.hasProperty(tagName, name, EMPTY_ARRAY) &&
        this._isSafeToReflectProperty(tagName, name)) {
        this.setAttribute(el, name, value.toString());
    }
};

I am not able to get what is the exception.

Please help.

Answer 1

There is something wrong with the filtering. Open the browser's Dev Tools and reload Wait for a second then press the 'catch exception' button.

It helps catch the place where the exception started. Sometimes u see a message like yours but the problem is in a different place.

I would write it as a comment but don't have enough reputation 😕