Exception when using dropdown with @angular/router

[fahania]

Component code in a simplified ex. looks like this:

Code: Select all

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { Dropdown } from 'primeng/primeng';

@Component({
  directives: [Dropdown],
  template: `
    <h2>DropDown Example</h2>
    <p-dropdown [options]="lang" [(ngModel)]="selLang"></p-dropdown>
    <p>Selected Language: {{selLang||'none'}}</p>
  `,
})
export class DropDownComponent {
  private lang: any[];
  private selLang: string[];

  constructor(private router: Router) {
    this.lang = [];
    this.lang.push({label: 'Java', value: 'Java'});
    this.lang.push({label: 'C++', value: 'C++'});
    this.lang.push({label: 'Perl', value: 'Perl'});
    this.selLang = [];
  }
}

But after navigating to the page and when doing [F5] (in Chrome), the following exception appears:

Code: Select all

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./DropDownComponent class DropDownComponent - inline template:2:4
ORIGINAL EXCEPTION: TypeError: this.documentClickListener is not a function
ORIGINAL STACKTRACE:
TypeError: this.documentClickListener is not a function
    at Dropdown.ngOnDestroy (http://localhost:8000/node_modules/primeng/components/dropdown/dropdown.js:286:14)
    at DebugAppView._View_DropDownComponent0.destroyInternal (DropDownComponent.template.js:166:22)
    at DebugAppView.AppView.destroyLocal (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:144:14)
    at DebugAppView.destroyLocal (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:279:43)
    at DebugAppView.AppView._destroyRecurse (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:133:14)
    at DebugAppView.AppView._destroyRecurse (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:131:25)
    at DebugAppView.AppView.destroy (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:119:14)
    at ComponentRef_.destroy (http://localhost:8000/node_modules/@angular/core/src/linker/component_factory.js:113:82)
    at RouterOutlet.unload (http://localhost:8000/node_modules/@angular/router/src/directives/router_outlet.js:12:22)
    at _LoadSegments.unloadOutlet (http://localhost:8000/node_modules/@angular/router/src/router.js:267:24)

The example works oke until refresh.
Other PrimeNG components do not seem to be a problem (until so far).
Does anyone have a clue what appears to be the problem?

[cagatay.civici]

Can you replicate at live showcase?

[fahania]

I'm afraid not, but you can find the sample project at https://gitlab.com/mytopaxx/sample_primeng if that helps.

[fahania]

Changing dropdown.js a bit, helps:

Code: Select all

    Dropdown.prototype.ngOnDestroy = function () {
        if (typeof(this.documentClickListener) == "function") {
          this.documentClickListener();
        }
        this.initialized = false;
    };