bug(pipes): cannot read property 'constructor' of undefined #6425

andreialecu · 2016-01-12T12:39:51Z

See this plunker: http://plnkr.co/edit/rHGx6CoX2lKy6WVFMkFI?p=preview

Related: #6288 for a similar issue with ngSwitch

The text was updated successfully, but these errors were encountered:

robwormald · 2016-01-14T08:47:15Z

this doesn't throw any errors for me? Browser / OS ?

andreialecu · 2016-01-14T12:04:39Z

@robwormald oops, wrong plunk link, fixed now.

ericmartinezr · 2016-01-14T12:07:42Z

dup of #5169

andreialecu · 2016-01-14T12:12:59Z

Same error as #5169, just slightly different way of getting it.

kevinsdooapp · 2016-02-05T09:43:39Z

Hi! Same error for me when the pipe is not instantiated and is going to be deshydraded. In my case, consider a route protected by login (ie: /home/profile). In case of user session expired, and user call directly the route, the login redirect outlet redirect to route /login but when angular trying to deshydrate the profile component (that use a pipe), exception is thrown.

Here is the stack:
TypeError: Cannot read property 'constructor' of undefined at Object.implementsOnDestroy (https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js:4883:16) at Function.ChangeDetectionUtil.callPipeOnDestroy (https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js:7954:38) at AbstractChangeDetector.ChangeDetector_ProfileComponent_0.dehydrateDirectives (viewFactory_ProfileComponent:101:31) at AbstractChangeDetector.dehydrate (https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js:8113:12) at AbstractChangeDetector.destroyRecursive (https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js:8129:12) at AbstractChangeDetector.destroyRecursive (https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js:8136:21) at AppView.destroy (https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js:10735:27) at AppViewManager_.destroyViewInContainer (https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js:6464:12) at ViewContainerRef_.remove (https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js:5962:17) at ComponentRef_.dispose [as _dispose] (https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js:12364:27)

Browser: Chrome Version 48.0.2564.97
OS: Windows 10

A workaround is to add a condition on element using pipe, to display it only when component onInit has been called.
In ProfileComponent.ts
ngOnInit(){ this.initialized=true; }
In profile.component.html
<p *ngIf="initialized">{{ 'user.profile' | i18n }}</p>

DeusProx · 2016-02-07T09:56:37Z

Got the same error! +1

neridonk · 2016-02-11T10:40:49Z

+1

superpezgeek · 2016-03-03T18:29:47Z

+1

pmowrer · 2016-03-07T15:39:01Z

Same as #5169. Pretty serious problem, hope this gets bumped to P1.

deepakgd · 2016-03-08T09:37:58Z

I am getting this error while changing routes. If i change routes continuously(within a sec) from one url to someother routes. this error exists in server.

try this link

`
EXCEPTION: TypeError: Cannot read property 'constructor' of undefined
vendor.bundle.js:13 EXCEPTION: TypeError: Cannot read property 'constructor' of undefinedt.logError @ vendor.bundle.js:13
vendor.bundle.js:13 STACKTRACE:t.logError @ vendor.bundle.js:13
vendor.bundle.js:13 TypeError: Cannot read property 'constructor' of undefined
at Object.n as implementsOnDestroy
at Function.e.callPipeOnDestroy (http://sparkling-development.surge.sh/vendor.bundle.js:5:813)
at e.ChangeDetector_e_0.dehydrateDirectives (eval at (http://sparkling-development.surge.sh/vendor.bundle.js:5:28498), :86:49)
at e.dehydrate (http://sparkling-development.surge.sh/vendor.bundle.js:5:16985)
at e.dehydrateView (http://sparkling-development.surge.sh/vendor.bundle.js:9:9535)
at t._viewDehydrateRecurse (http://sparkling-development.surge.sh/vendor.bundle.js:9:4435)
at t._destroyViewInContainer (http://sparkling-development.surge.sh/vendor.bundle.js:9:4117)
at t.destroyViewInContainer (http://sparkling-development.surge.sh/vendor.bundle.js:9:2867)
at t.remove (http://sparkling-development.surge.sh/vendor.bundle.js:9:15132)
at t.u as _dispose

-----async gap-----
Error
at r (http://sparkling-development.surge.sh/vendor.bundle.js:42:7038)
at r.fork (http://sparkling-development.surge.sh/vendor.bundle.js:42:7964)
at r.bind (http://sparkling-development.surge.sh/vendor.bundle.js:35:1686)
at r (http://sparkling-development.surge.sh/vendor.bundle.js:35:13629)
at W.e.(anonymous function) as then
at e.deactivate (http://sparkling-development.surge.sh/vendor.bundle.js:18:21180)
at http://sparkling-development.surge.sh/vendor.bundle.js:17:17925
at r.run (http://sparkling-development.surge.sh/vendor.bundle.js:35:1996)
at r.run (http://sparkling-development.surge.sh/vendor.bundle.js:7:10567)
at http://sparkling-development.surge.sh/vendor.bundle.js:35:1720

-----async gap-----
Error
at r (http://sparkling-development.surge.sh/vendor.bundle.js:42:7038)
at r.fork (http://sparkling-development.surge.sh/vendor.bundle.js:42:7964)
at r.bind (http://sparkling-development.surge.sh/vendor.bundle.js:35:1686)
at r (http://sparkling-development.surge.sh/vendor.bundle.js:35:13629)
at W.e.(anonymous function) as then
at http://sparkling-development.surge.sh/vendor.bundle.js:17:15509
at r.run (http://sparkling-development.surge.sh/vendor.bundle.js:35:1996)
at r.run (http://sparkling-development.surge.sh/vendor.bundle.js:7:10567)
at http://sparkling-development.surge.sh/vendor.bundle.js:35:1720
at x (http://sparkling-development.surge.sh/vendor.bundle.js:42:2126)

-----async gap-----
Error
at r (http://sparkling-development.surge.sh/vendor.bundle.js:42:7038)
at r.fork (http://sparkling-development.surge.sh/vendor.bundle.js:42:7964)
at r.bind (http://sparkling-development.surge.sh/vendor.bundle.js:35:1686)
at r (http://sparkling-development.surge.sh/vendor.bundle.js:35:13629)
at W.e.(anonymous function) as then
at t.e._navigate (http://sparkling-development.surge.sh/vendor.bundle.js:17:15457)
at http://sparkling-development.surge.sh/vendor.bundle.js:17:15266
at r.run (http://sparkling-development.surge.sh/vendor.bundle.js:35:1996)
at r.run (http://sparkling-development.surge.sh/vendor.bundle.js:7:10567)
at http://sparkling-development.surge.sh/vendor.bundle.js:35:1720

apavillet · 2016-03-09T09:55:56Z

+1

ghaiat · 2016-03-09T09:57:21Z

+1

davidrensh · 2016-03-09T20:55:06Z

kevinsdooapp's solution is working for me,
I have exactly same case as kevin: AsyncPipe, redirect to login router, TypeError: Cannot read property 'constructor' of undefined

Working copy:

@Component({
    selector: 'xforms',
    pipes: [AsyncPipe],
    template: `
<div *ngIf="initialized">
        <form-basic-item  [fbRootUrl]="firebaseUrl" (itemChanged)="selectItem($event)"></form-basic-item>
        <div>
            <span class="radio"> {{myformname }} items info for {{num}} <br>
                <input [(ngModel)]="quiznum" placeholder="Eneter quiz number" > <br>
                <input [(ngModel)]="quizdes" placeholder="Eneter quiz description" > <br>
                <input [(ngModel)]="quizcorrectanswer" placeholder="Eneter quiz correct answer" > <br>
                <button class="twitter" (click)="saveItemQuiz()" > Save </button>
                <ul>
                    <li *ngFor="#d of aitemsDetails | async" >
                        <input type="radio" name= "xform3" value="{{d.num}}" (click)="selectQuiz(d.num,d.des,d.correctanswer)" > {{d.num }}. &nbsp; {{ d.des }} Correct answer: {{ d.correctanswer }}
                    </li>
                </ul>
            </span><br>    
        </div>  
</div>  
    `,
///////////////////////////////
    aitemsDetails: Observable<any[]>;
    initialized: any = false;
    constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader,
        _parentRouter: Router, @Attribute('name') nameAttr: string) {
        super(_elementRef, _loader, _parentRouter, nameAttr);
        if (!localStorage.getItem('jwt')) {
            console.log("Form Go to login jwt=" + localStorage.getItem('jwt'));
            _parentRouter.navigateByUrl('/login');
        }
        this.firebaseUrl = "https://datahive.firebaseio.com";
        this.messagesRef = new Firebase(this.firebaseUrl);

    }
    ngOnInit() { this.initialized = true; }

deepakgd · 2016-03-11T11:31:32Z

@davidreher ok but doing this in all component is not good idea. This will be done automatically mean its good

davidrensh · 2016-03-11T17:13:42Z

Totally agree. we can wait ...

deepakgd · 2016-03-24T09:26:02Z

Still issue persists in angular2 beta 12

nosachamos · 2016-03-29T03:52:20Z

Hitting this one as well on beta 12.

sonicoder86 · 2016-03-29T07:21:22Z

what es6 shim version are you using?

deepakgd · 2016-03-29T07:27:20Z

"es6-shim": "^0.35.0",

jonmiles · 2016-04-01T12:37:14Z

I'm also encountering this issue on upgrading to Angular 2 beta.13.

For me it happens when I attempt a login redirect, using router.navigateByUrl in a custom RouterOutlet. The following errors are being thrown during the destruction of the previous component.

angular2.dev.js:23877 Error: Uncaught (in promise): TypeError: Cannot read property 'constructor' of undefined
    at resolvePromise (zone.js:520)
    at zone.js:497
    at ZoneDelegate.invoke (zone.js:308)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (angular2.dev.js:2111)
    at ZoneDelegate.invoke (zone.js:307)
    at Zone.run (zone.js:201)
    at zone.js:553
    at ZoneDelegate.invokeTask (zone.js:341)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.dev.js:2103)
    at ZoneDelegate.invokeTask (zone.js:340)BrowserDomAdapter.logError @ angular2.dev.js:23877ExceptionHandler.call @ angular2.dev.js:1320(anonymous function) @ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2128ZoneDelegate.handleError @ zone.js:312Zone.runGuarded @ zone.js:218drainMicroTaskQueue @ zone.js:472ZoneTask.invoke @ zone.js:411
zone.js:446

Unhandled Promise rejection: Cannot read property 'constructor' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'constructor' of undefined
    at Object.implementsOnDestroy (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:5027:16)
    at Function.ChangeDetectionUtil.callPipeOnDestroy (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:8188:38)
    at AbstractChangeDetector.ChangeDetector_MainHeader_0.dehydrateDirectives (viewFactory_MainHeader:208:31)
    at AbstractChangeDetector.dehydrate (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:9629:12)
    at AbstractChangeDetector.destroyRecursive (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:9642:12)
    at AbstractChangeDetector.destroyRecursive (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:9649:21)
    at AbstractChangeDetector.destroyRecursive (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:9649:21)
    at AppView.destroy (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:10151:27)
    at AppViewManager_.destroyViewInContainer (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:6643:12)
    at ViewContainerRef_.remove (http://localhost:9000/node_modules/angular2/bundles/angular2.dev.js:6139:17)

Importantly I do not have any pipes, async or otherwise, in the components in question.

[UPDATE] Adding a completely unused and unneeded async pipe to the template of the component being destroyed resolve the issue. This makes no sense and is rather annoying, I assume this is an angular bug.

ChrisPearce · 2016-04-01T19:53:15Z

@jonmiles I'm seeing the same issue when using router.navigateByUrl.

Do you have a quick example you could post of the workaround you mentioned about including a unused async pipe? I'd like to try it and see if it unblocks the error on my app too.

jonmiles · 2016-04-02T10:53:12Z

@ChrisPearce I simply added <p>{{data | async}}</p> to the template, where data is of type Observable. However, although it fixed my original issue, several new errors later, I'm back to the same error being thrown further along.

Seems like an issue with recent Router changes... any ideas?

tom10271 · 2016-04-06T02:11:55Z

I got a very similar error message triggered by a empty templateUrl in Component decorating.

jonmiles · 2016-04-06T05:19:07Z

Sounds about right, from what I understand the error is thrown while attempting to clean up a component's pipes which do not exist. Really need a fix for this to move forward!

felix-halim · 2016-04-11T07:39:36Z

I'm using pipes and this error occurred after several arrays go through the pipe, but it is not consistent. Sometimes the error appear after one, two or more clicks (each click will make a new/old array goes through the pipe). I'm not sure whether this is related with this bug, but this is the trace (I'm using angular 2 beta 13):

angular2.dev.js:23877 TypeError: Cannot read property 'constructor' of undefined
at Object.implementsOnDestroy (angular2.dev.js:5027)
at Function.ChangeDetectionUtil.callPipeOnDestroy (angular2.dev.js:8188)
at AbstractChangeDetector.ChangeDetector_NextProblemsComponent_1.dehydrateDirectives (viewFactory_NextProblemsComponent:3009)
at AbstractChangeDetector.dehydrate (angular2.dev.js:9629)
at AbstractChangeDetector.destroyRecursive (angular2.dev.js:9642)
at AppView.destroy (angular2.dev.js:10151)
at AppViewManager_.destroyViewInContainer (angular2.dev.js:6643)
at ViewContainerRef_.remove (angular2.dev.js:6139)
at NgFor._bulkRemove (angular2.dev.js:15056)
at NgFor._applyChanges (angular2.dev.js:15021)

This bug is a blocker for migrating to Angular 2 for me.

jeffbcross · 2016-04-13T05:12:47Z

I've had this issue when imperatively navigating away from a default route. I.e. if I directly visit https://myapp/login, but my app detects that I'm already logged in and re-directs me to the default logged in view.

jteplitz · 2016-04-15T06:16:03Z

@jeffbcross I've noticed this issue whenever I route to a view that contains a pipe but no data gets passed into that pipe before I navigate away (i.e. the async pipe but the observable doesn't get instantiated before the user navigates away). It's probably the same thing you're running into.

AmineAfia · 2016-04-16T08:23:53Z

+1

kisdaniel · 2016-04-19T19:46:22Z

I have a same issue with ng2-translate, and the workaround works for me

ngOnInit(){ this.initialized=true; }

<p *ngIf="initialized">{{ 'to.be.translated' | translate }}</p>

jbigelow · 2016-04-20T05:04:54Z

I'm seeing this error in beta 14. My component is using routing to check OnActivate if a user prop on a service is undefined, if yes redirect to Login, else show results of in a table.

I refactored my property (which was working) from
myBizObjects: BizObject[]
to
myBizObjects: Observable<BizObject[]>

Then added the async pipe to my ngFor in the template and got the mentioned exception:

angular2.dev.js:23941 Error: Uncaught (in promise): TypeError: Cannot read property 'constructor' of undefined

I'll go back to my original implementation, calling subscribe from within the component and using a non-Observable array for the time being.

msegers · 2016-04-20T06:32:33Z

I'm encountering this issue on Angular Beta 14, did not occur before, it's on any kind of route and occurs on only one page. Not sure why, but I do use some currency and date pipes.

heroInCommunity · 2016-04-27T16:02:44Z

Issue remains actual on Angular 2 Beta 15.
Found a work-around for ng2-translate:
not to use pipes but instead instant() method.

vicb · 2016-06-17T19:00:36Z

Does this issue still occurs with rc2 ?
If yes, please provide an updated plunker. Thanks.

apavillet · 2016-06-18T13:31:25Z

@vicb never had this issue since rc2

vicb · 2016-06-18T16:39:20Z

Closing, please re-open with an updated plunker if this is still a pb on rc2+

caneraydinbey · 2016-11-23T11:42:29Z

I have it.

angular-automatic-lock-bot · 2019-09-10T07:22:10Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

mhevery added type: bug/fix comp: core/change_detection effort1: hours labels Jan 21, 2016

neridonk mentioned this issue Feb 11, 2016

Uncaught ReferenceError: System is not defined mgechev/angular-seed#464

Closed

sonicoder86 mentioned this issue Feb 14, 2016

Uncaught (in promise) TypeError: object is not a constructor sonicoder86/angular2-babel-esnext-starter#1

Closed

zoechi mentioned this issue Mar 12, 2016

TypeError: Cannot read property 'registerPrimaryOutlet' of null #7569

Closed

felix-halim added a commit to felix-halim/uhunt that referenced this issue Apr 17, 2016

Avoid pipe bug: angular/angular#6425

fc02b68

ericmartinezr mentioned this issue Apr 19, 2016

Pipe life cycle on destroy throwing exception if pipe wasn't been initialized #8132

Closed

vicb added the need: repro label Jun 17, 2016

vicb closed this as completed Jun 18, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019

bug(pipes): cannot read property 'constructor' of undefined #6425

bug(pipes): cannot read property 'constructor' of undefined #6425

Comments

andreialecu commented Jan 12, 2016

robwormald commented Jan 14, 2016

andreialecu commented Jan 14, 2016

ericmartinezr commented Jan 14, 2016

andreialecu commented Jan 14, 2016

kevinsdooapp commented Feb 5, 2016

DeusProx commented Feb 7, 2016

neridonk commented Feb 11, 2016

superpezgeek commented Mar 3, 2016

pmowrer commented Mar 7, 2016

deepakgd commented Mar 8, 2016

apavillet commented Mar 9, 2016

ghaiat commented Mar 9, 2016

davidrensh commented Mar 9, 2016

deepakgd commented Mar 11, 2016

davidrensh commented Mar 11, 2016

deepakgd commented Mar 24, 2016

nosachamos commented Mar 29, 2016

sonicoder86 commented Mar 29, 2016

deepakgd commented Mar 29, 2016

jonmiles commented Apr 1, 2016

ChrisPearce commented Apr 1, 2016

jonmiles commented Apr 2, 2016

tom10271 commented Apr 6, 2016

jonmiles commented Apr 6, 2016

felix-halim commented Apr 11, 2016

jeffbcross commented Apr 13, 2016

jteplitz commented Apr 15, 2016

AmineAfia commented Apr 16, 2016

kisdaniel commented Apr 19, 2016

jbigelow commented Apr 20, 2016 • edited

msegers commented Apr 20, 2016

heroInCommunity commented Apr 27, 2016 • edited

vicb commented Jun 17, 2016

apavillet commented Jun 18, 2016 • edited

vicb commented Jun 18, 2016

caneraydinbey commented Nov 23, 2016

angular-automatic-lock-bot bot commented Sep 10, 2019

jbigelow commented Apr 20, 2016 •

edited

heroInCommunity commented Apr 27, 2016 •

edited

apavillet commented Jun 18, 2016 •

edited