version 5.20183.550 error : Cannot read property 'ariaLabels' of undefined

Posted by: ozgur on 15 January 2019, 2:40 am EST

  • Posted 15 January 2019, 2:40 am EST

    "Hi, we've upgraded to the latest version of the program Can not read property 'ariaLabels' is an undefined error, what's the difference with the previous version? What changes have been made?"


    Uncaught TypeError: Cannot read property 'ariaLabels' of undefined
    at t [as constructor] (wijmo.input.js:13)
    at new t (wijmo.angular2.input.js:13)
    at createClass (core.js:12443)
    at createDirectiveInstance (core.js:12284)
    at createViewNodes (core.js:13742)
    at callViewAction (core.js:14176)
    at execComponentViewsAction (core.js:14085)
    at createViewNodes (core.js:13770)
    at createRootView (core.js:13631)
    at callWithDebugContext (core.js:15056)
  • Replied 16 January 2019, 12:51 am EST

    Hi,

    Could you please explain some more about the issue like:
    • When you are getting the error?
    • Which control are you using?
    Also, could you please share some code snippets or even better, a small sample replicating the issue, that would be really helpful in the investigation of the issue.

    ~Sharad
  • Replied 28 January 2019, 4:54 pm EST

    Exactly the same error appeared in a wjAutoComplete wrapper that I'm building for a project after updating to 5.20183.550. I'm attaching the code if it is useful:

    HTML Code:


    <label *ngIf="label"
    class="svm-form-label"
    [for]="input"
    >
    {{ label | translate}}
    </label>
    <wj-auto-complete
    [id]="input"
    [itemsSource]="items"
    [delay]="200"
    [isRequired]="true"
    [isAnimated]="false"
    [isDisabled]="isDisabled"
    [isContentHtml]="true"
    [isEditable]="false"
    [minLength]="1"
    [displayMemberPath]="'name'"
    [(selectedItem)]="source.selectedItem"
    [placeholder]="placeholder">

    <ng-template wjItemTemplate let-item="item" let-itemIndex="itemIndex">
    {{(descriptionAdapter === null) ?
    ((item.name === firstItemName || !showItemName) ? item.description : item.name + ' - ' + item.description) :
    ((item.name === firstItemName || !showItemName) ? descriptionAdapter(item) : item.name + ' - ' + descriptionAdapter(item))}}
    </ng-template>

    </wj-auto-complete>


    TypeScript component:



    import {AfterContentInit, Component, Input, OnDestroy, OnInit} from '@angular/core';
    import {Item, ItemsSourceService} from '../../services/items-source/items-source.service';
    import {Subscription} from 'rxjs/Subscription';
    import * as _ from 'lodash';

    @Component({
    selector: 'svm-item-selector',
    templateUrl: './svm-item-selector.html',
    styleUrls: ['./svm-item-selector.scss']
    })
    export class SvmItemSelectorComponent implements OnInit, OnDestroy, AfterContentInit {

    items: Item[];

    @Input() label = '';
    @Input() input = '';
    @Input() placeholder = '';
    @Input() source: ItemsSourceService<Item>;
    @Input() sort = true;
    @Input() sortBy = 'name';
    @Input() sortFunction: (item: Item, item2: Item) => number = null;
    @Input() firstItemDesc: string;
    @Input() firstItemName = '';
    @Input() tryToSelectItemName: string;
    @Input() showItemName = true;
    @Input() isDisabled = false;
    @Input() descriptionAdapter: (item: Item) => string = null;

    private _itemsSub: Subscription;
    private _defaultSub: Subscription;

    private _firstItem: Item;
    private _tryToSelect = true;
    private _delayedSelection: Item = undefined;
    private _viewInit = false;

    constructor() {
    this.items = [];
    }

    ngOnInit() {
    this._itemsSub = this.source.items.subscribe(objects => {
    if (this.sort) {
    if (this.sortFunction) {
    objects.sort(this.sortFunction);
    } else {
    objects.sort((obj1, obj2) => obj1[this.sortBy].localeCompare(obj2[this.sortBy]));
    }
    }

    this.addFirstItem(objects);

    if (_.isEqual(this.items, objects)) { return; }

    this.source.lastItems = objects;
    if (objects.length > 0) {
    this.items = objects;

    if (!this.source.selectedItemSource) { // Do not select an item if there's a selected item source
    let preSelectedItem = objects[0];

    if (this.tryToSelectItemName && this._tryToSelect) {
    const defItem = objects.find(obj => obj.name === this.tryToSelectItemName);
    this._tryToSelect = false;

    if (defItem) {
    preSelectedItem = defItem;
    }
    }
    if (this._viewInit) {
    this.source.selectedItem = preSelectedItem;
    } else {
    this._delayedSelection = preSelectedItem;
    }
    }
    } else {
    this.items = objects;
    if (this._viewInit) {
    this.source.selectedItem = null;
    } else {
    this._delayedSelection = null;
    }
    }
    }, (/* error */) => {
    this.source.lastItems = null;
    this.items = [];
    if (this._viewInit) {
    this.source.selectedItem = null;
    } else {
    this._delayedSelection = null;
    }
    });

    if (this.source.selectedItemSource) {
    this._defaultSub = this.source.selectedItemSource.subscribe(selItem => {
    if (selItem) {
    this.source.findAndSelectItem(item => item.name === selItem.name);
    } else {
    if (this.items.length > 0) {
    this.source.selectedItem = this.items[0];
    }
    }
    });
    }
    }

    ngAfterContentInit(): void {
    this._viewInit = true;
    if (this._delayedSelection !== undefined) {
    this.source.selectedItem = this._delayedSelection;
    this._delayedSelection = undefined;
    }
    }

    ngOnDestroy(): void {
    if (this._itemsSub) { this._itemsSub.unsubscribe(); }
    if (this._defaultSub) { this._defaultSub.unsubscribe(); }
    }

    private addFirstItem(objects: Item[]): void {
    if (this.firstItemDesc !== undefined) {
    if (this._firstItem === undefined) {
    this._firstItem = {
    name: this.firstItemName,
    description: this.firstItemDesc
    };
    }
    objects.unshift(this._firstItem);
    }
    }

    }


  • Replied 29 January 2019, 1:18 am EST

    Hi Ramiro,

    We have prepared a sample from the provided code snippet but we are still unable to replicate the issue at our end.
    Could you please have a look at the following sample and let us know if we are missing something imp in order to replicate the issue:
    https://stackblitz.com/edit/angular-mqadsw?file=app%2Fsvm-item-selector%2Fsvm-item-selector.component.ts
    You may also update the sample or share a stripped down sample of your own replicating the issue.
  • Replied 31 January 2019, 1:09 pm EST

    Thanks for the sample. I tried to strip down the component and implement the simplification (removed observables and provided hardcoded inputs, as in your example) but it seems that the mere existance of the wjAutoComplete component inside my component is enough to trigger the error.

    To give some some insight on the situation, I'll add some details:

    * The component was working fine before we updated to the 5.20183.550. We were using 5.20173.xxx before. We upgraded to Angular v7 and we were using Angular v5.2 before.
    * This also happens with a wrapper of the wjInputDateTime, with the same error.
    * I'm implementing the component in an Angular lazy-loaded module. We're using wijmo components in a sister app of this where we're not using lazy-loading and this error does not appear. We were using lazy-loading in the Angular v5 version too.
    * The error only appears when doing a fresh login in the application, but components are loading fine if we access the application with the token that's stored in the browser local storage. We're using Angular's AuthGuard to provide detection of a user having permission to access the application.
    * Our login component is shared between 2 applications and the error only appears in the one in which we're using lazy loading.
  • Replied 1 February 2019, 2:05 am EST

    We tried with angular 7 and lazily loaded modules but we are still unable to replicate the issue.
    Please have a look at the following sample that we used for testing and let us know if we are missing anything:
    https://stackblitz.com/edit/angular-p26ga3?file=src%2Fapp%2Fapp.module.ts
    Since we are unable to replicate the issue at our end, can you please share a stripped down sample replicating the issue so that we can investigate the issue?
  • Marked as Answer

    Replied 7 February 2019, 9:44 am EST

    We were able to fix the issue. It was related with an usage of old Wijmo 2017.x culture files, which caused the application to crash when dealing with the wj-auto-complete, wj-combo-box and wj-input-date-time controls. Wijmo 2017.x didn't supported culture customizations on those controls, and then we had the crash.

    Thanks for all the help and sorry for the inconveniences.
  • Replied 8 February 2019, 1:35 am EST

    We are glad to hear that you were able to resolve the issue.
    Thank you for notifying us about the same.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels