We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Error In Production Build: TypeError: Cannot read property 'indexOf' of undefined

Thread ID:

Created:

Updated:

Platform:

Replies:

147652 Sep 18,2019 04:37 PM UTC Sep 19,2019 06:11 AM UTC Angular - EJ 2 2
loading
Tags: Grid
Jake
Asked On September 18, 2019 05:47 PM UTC

When running a development build everything works fine. No errors. 
However, running ng serve --prod or deploying the production causes the error below to happen in the component with the grid.
It also causes Angular RouterLinks to stop working after access the component. Before accessing the component all RouterLinks are working

#edit#
Just having the grid on the page causes the issue. I've tested just putting the grid, with no data source and no column definitions and the error still happens.
<ejs-grid >ejs-grid>
#endedit#

Error when viewing the component.
main.2d2f2014862335ce0567.js:1 ERROR TypeError: Cannot read property 'indexOf' of undefined
    at Object.formatPosition (main.2d2f2014862335ce0567.js:1)
    at Object.initialize (main.2d2f2014862335ce0567.js:1)
    at Object.render (main.2d2f2014862335ce0567.js:1)
    at Object.appendTo (main.2d2f2014862335ce0567.js:1)
    at new e (main.2d2f2014862335ce0567.js:1)
    at new (main.2d2f2014862335ce0567.js:1)
    at e.createTooltip (main.2d2f2014862335ce0567.js:1)
    at e.gridRender (main.2d2f2014862335ce0567.js:1)
    at e.render (main.2d2f2014862335ce0567.js:1)
    at e.appendTo (main.2d2f2014862335ce0567.js:1)

Error on RouterLinks after accessing the component:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
    at e.removeEventListener (main.2d2f2014862335ce0567.js:1)
    at e.removeListener (main.2d2f2014862335ce0567.js:1)
    at e.destroy (main.2d2f2014862335ce0567.js:1)
    at e.ngOnDestroy (main.2d2f2014862335ce0567.js:1)
    at Mr (main.2d2f2014862335ce0567.js:1)
    at Cr (main.2d2f2014862335ce0567.js:1)
    at yr (main.2d2f2014862335ce0567.js:1)
    at xl (main.2d2f2014862335ce0567.js:1)
    at Vl (main.2d2f2014862335ce0567.js:1)
    at Dl (main.2d2f2014862335ce0567.js:1)
    at O (polyfills.661b40d382a0d9e9088a.js:1)
    at O (polyfills.661b40d382a0d9e9088a.js:1)
    at polyfills.661b40d382a0d9e9088a.js:1
    at l.invokeTask (polyfills.661b40d382a0d9e9088a.js:1)
    at Object.onInvokeTask (main.2d2f2014862335ce0567.js:1)
    at l.invokeTask (polyfills.661b40d382a0d9e9088a.js:1)
    at a.runTask (polyfills.661b40d382a0d9e9088a.js:1)
    at m (polyfills.661b40d382a0d9e9088a.js:1)
    at u.invokeTask [as invoke] (polyfills.661b40d382a0d9e9088a.js:1)
    at m (polyfills.661b40d382a0d9e9088a.js:1)

It sounded similar to the following issues.
I've deleted all duplicate node_modules folder in the sync fusion folder and the issues persists.
https://www.syncfusion.com/forums/144106/error-loading-grid-or-scheduler-after-updating-to-17-1-41

Component. If I comment out the grid, everything else works correctly.
<div class="container pt-3" style="width: 100%">                    
    <div class="row mb-2 justify-content-between">
        <div class="col-3">
            <button ejs-button class="e-outline e-primary" (click)="loadSchedules()" [disabled]="isLoading" title="Refresh Schedules">
                <span>
                    <fa-icon [icon]="['fal','sync']" [spin]="isLoading" class='mr-1'>fa-icon>                    
                    Refresh
                span>
            button>
        div>
        <div class="col-3">
            <div class="mt-2" title="Show only archived or active schedules.">
                <input id="viewArchived" type="checkbox" [(ngModel)]="viewArchived" (change)="loadSchedules()">
                <label class="ml-2" for="viewArchived">View Archivedlabel>
            div>
        div>
        <div class="col-6">
            <div class="float-right">
                <div>
                    <fa-icon class="mr-2" [icon]="['fal','filter']">fa-icon>
                    <input type="text" class="inputText" placeholder="  Search" title="Type to search schedules."
                        [(ngModel)]="searchString" (keyup)="filterSchedulesBySearchString($event)" >
                div>                
            div>
        div>
    div>    
    <div *ngIf="filteredSchedules">
        <ejs-grid [dataSource]='filteredSchedules'>
            <e-columns>                
                <e-column headerText='Schedule' [template]="scheduleLink" >
                    <ng-template #scheduleLink let-data>
                        <div>
                            <a [routerLink]="['/scheduling/schedule-detail/' + data.projectId]" [text]="data.scheduleName">a>
                        div>
                    ng-template>
                e-column>
                <e-column headerText='Job' [template]="jobLink" *ngIf="JobId <= 0;">
                    <ng-template #jobLink let-data>
                        <div>
                            <a [routerLink]="['/jobs/job-detail/' + data.jobId + '/' + data.jobName]" [text]="data.jobName">a>
                        div>
                    ng-template>
                e-column>
                <e-column field='scheduledStartDateUtc' headerText='Start' [valueAccessor]="formatStartDate" >e-column>
                <e-column field='scheduledEndDateUtc' [valueAccessor]="formatEndDate" headerText='End'  >e-column>                
                <e-column headerText='Duration (Days)' [valueAccessor]="formatDuration">e-column>
                <e-column headerText='Actions' [template]="actionsTemplate">
                    <ng-template #actionsTemplate let-data>
                        <div>
                            <button ejs-button title="Archive Schedule" class="e-outline e-warning float-right m-1"
                                (click)="archiveSchedule(data.jobId, data.projectId, true )" *ngIf="!data.isArchived">
                                <fa-icon [icon]="['fal','archive']" size="s">fa-icon>
                            button>
                            <button ejs-button title="Reactivate Schedule" class="e-outline e-primary float-right m-1"
                                (click)="archiveSchedule(data.jobId, data.projectId, false )" *ngIf="data.isArchived">
                                <fa-icon [icon]="['fal','trash-restore']" size="s">fa-icon>
                            button>
                            <button ejs-button title="Release Schedule" class="e-outline e-success float-right m-1"
                                (click)="releaseSchedule(data.jobId, data.projectId, data.holidayMapId, data.scheduledStartDateUtc, data.workScheduleId )">
                                <fa-icon [icon]="['fal','calendar-edit']" size="s">fa-icon>
                            button>
                        div>
                    ng-template>
                e-column>
            e-columns>
        ejs-grid>
    div>    
div>

Jake
Replied On September 18, 2019 06:52 PM UTC

So I did get this working.
It was updating one or more of the NPM packages. I don't know which one but one in the following screenshot.



Pavithra Subramaniyam [Syncfusion]
Replied On September 19, 2019 06:11 AM UTC

Hi Jake, 
 
Thanks for contacting Syncfusion. 

We are happy to hear that issue has been resolved. 

We suspect that the Syncfusion packages are not installed properly which might be the cause of the issue. So we suggest you to use the remove the @syncfusion packages folder and package.lock.json file and install the packages again for this scenario. Please refer to the below documentation link for package update.  
  
  
Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon