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

[Jake]

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]

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]

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.  

  

Documentation: https://ej2.syncfusion.com/vue/documentation/common/how-to/update-npm-package/  

  

Regards, 

Pavithra S.