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. Image for the cookie policy date

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

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

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>

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.

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">
                    <fa-icon [icon]="['fal','sync']" [spin]="isLoading" class='mr-1'>fa-icon>                    
        <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 class="col-6">
            <div class="float-right">
                    <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 *ngIf="filteredSchedules">
        <ejs-grid [dataSource]='filteredSchedules'>
                <e-column headerText='Schedule' [template]="scheduleLink" >
                    <ng-template #scheduleLink let-data>
                            <a [routerLink]="['/scheduling/schedule-detail/' + data.projectId]" [text]="data.scheduleName">a>
                <e-column headerText='Job' [template]="jobLink" *ngIf="JobId <= 0;">
                    <ng-template #jobLink let-data>
                            <a [routerLink]="['/jobs/job-detail/' + data.jobId + '/' + data.jobName]" [text]="data.jobName">a>
                <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>
                            <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 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 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>

2 Replies

JA Jake 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.

PS Pavithra Subramaniyam Syncfusion Team 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.  
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon