Error in tdLoading with Circle Overlay: Cannot read property 'unsubscribe' of undefined Error #396

imVinayPandya · 2017-03-01T11:50:06Z

Do you want to request a feature or report a bug?

Bug

Bug Report

when i am using overlay strategy in loading, i am getting error please go down to see full error details, but with replace strategy its working fine.

i have dive into Covalent doc code in github repo, but i didn't found anything. my code is looked like this.

<div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
...<!-- my login form goes here -->
</div>

and on login click

this._loadingService.register('overlayStarSyntax');

and on error / response

this._loadingService.resolve('overlayStarSyntax');

Which version of Angular and Material, and which browser and OS does this issue affect?

my package.json is looked like this

"dependencies": {
    "@angular/common": "2.4.5",
    "@angular/compiler": "2.4.5",
    "@angular/core": "2.4.5",
    "@angular/forms": "2.4.5",
    "@angular/http": "2.4.5",
    "@angular/flex-layout": "2.0.0-rc.1",
    "@angular/material": "2.0.0-beta.2",
    "@angular/platform-browser": "2.4.5",
    "@angular/platform-browser-dynamic": "2.4.5",
    "@angular/platform-server": "2.4.5",
    "@angular/router": "3.4.5",
    "@covalent/core": "1.0.0-beta.2",
    "@covalent/charts": "1.0.0-beta.2",
    "@covalent/dynamic-forms": "1.0.0-beta.2",
    "@covalent/highlight": "1.0.0-beta.2",
    "@covalent/http": "1.0.0-beta.2",
    "@covalent/markdown": "1.0.0-beta.2",
    "@swimlane/ngx-charts": "^4.1.3",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "highlight.js": "9.9.0",
    "rxjs": "^5.1.0",
    "showdown": "1.6.0",
    "zone.js": "^0.7.6",
    "d3": "^4.6.0",
    "angular2-jwt": "^0.1.28",
    "angular2-notifications": "^0.4.53"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.0",
    "@angular/compiler-cli": "2.4.5",
    "@types/hammerjs": "2.0.30",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "@types/selenium-webdriver": "2.53.36",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-firefox-launcher": "1.0.0",
    "karma-phantomjs-launcher": "1.0.1",
    "phantomjs-prebuilt": "2.1.7",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "^4.4.2",
    "typescript": "2.1.5"
  },
  "optionalDependencies": {
    "@covalent/data": "0.4.0"
  }

Other information

Uncaught (in promise): Error: Error in ./LoginComponent class LoginComponent - inline template:49:14 caused by: Cannot read property 'unsubscribe' of undefined Error: Error in ./LoginComponent class LoginComponent - inline template:49:14 caused by: Cannot read property 'unsubscribe' of undefined at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:25987:33) at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:8134:16) at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:8199:16) at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:108745:16) at View_LoginComponent1.DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:140449:23) at View_LoginComponent1.DebugAppView.destroy (http://localhost:4200/vendor.bundle.js:140408:18) at ViewContainerRef_.remove (http://localhost:4200/vendor.bundle.js:109469:14) at ViewContainerRef_.clear (http://localhost:4200/vendor.bundle.js:109490:18) at TdLoadingFactory.createOverlayComponent (http://localhost:4200/vendor.bundle.js:125115:26) at TdLoadingService.createComponent (http://localhost:4200/vendor.bundle.js:79923:72) at TdLoadingDirective._registerComponent (http://localhost:4200/vendor.bundle.js:157957:53) at TdLoadingDirective.ngOnInit (http://localhost:4200/vendor.bundle.js:157936:14) at Wrapper_TdLoadingDirective.ngDoCheck (/CovalentLoadingModule/TdLoadingDirective/wrapper.ngfactory.js:94:53) at CompiledTemplate.proxyViewClass.View_LoginComponent0.detectChangesInternal (/LoginModule/LoginComponent/component.ngfactory.js:976:32) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:140224:14) at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:25987:33) at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:8134:16) at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:8199:16) at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:108745:16) at View_LoginComponent1.DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:140449:23) at View_LoginComponent1.DebugAppView.destroy (http://localhost:4200/vendor.bundle.js:140408:18) at ViewContainerRef_.remove (http://localhost:4200/vendor.bundle.js:109469:14) at ViewContainerRef_.clear (http://localhost:4200/vendor.bundle.js:109490:18) at TdLoadingFactory.createOverlayComponent (http://localhost:4200/vendor.bundle.js:125115:26) at TdLoadingService.createComponent (http://localhost:4200/vendor.bundle.js:79923:72) at TdLoadingDirective._registerComponent (http://localhost:4200/vendor.bundle.js:157957:53) at TdLoadingDirective.ngOnInit (http://localhost:4200/vendor.bundle.js:157936:14) at Wrapper_TdLoadingDirective.ngDoCheck (/CovalentLoadingModule/TdLoadingDirective/wrapper.ngfactory.js:94:53) at CompiledTemplate.proxyViewClass.View_LoginComponent0.detectChangesInternal (/LoginModule/LoginComponent/component.ngfactory.js:976:32) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:140224:14) at resolvePromise (http://localhost:4200/polyfills.bundle.js:25672:31) [angular] at resolvePromise (http://localhost:4200/polyfills.bundle.js:25648:17) [angular] at http://localhost:4200/polyfills.bundle.js:25708:17 [angular] at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:57952:37) [angular] at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:25391:36) [angular] at Zone.runTask (http://localhost:4200/polyfills.bundle.js:25195:47) [<root> => angular] at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:25558:35) [<root>]

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

imVinayPandya · 2017-03-02T06:25:14Z

i forgot to mention that my Login Component is lazy loaded.

emoralesb05 · 2017-03-03T03:40:34Z

So, does this happen as it loads? or when exactly does it happen?

Trying to see if we can replicate it.

imVinayPandya · 2017-03-03T03:48:26Z

I have implemented to load on when i click on login button, but i can even load login page its giving me this error. Error is accuring on login page loading.

…

On 03-Mar-2017 9:10 AM, "Ed Morales" ***@***.***> wrote: So, does this happen as it loads? or when exactly does it happen? Trying to see if we can replicate it. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#396 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEx2_YGZQ7RWppiklJNloaAvNjh9SBgcks5rh4uzgaJpZM4MPjsF> .

emoralesb05 · 2017-03-03T04:08:48Z

Tried lazy loading it.. and still cant replicate it.

Any chance you can post the html? or a link to the repo?

imVinayPandya · 2017-03-03T04:27:24Z

Okay wait let me think what can i do...

…

On 03-Mar-2017 9:38 AM, "Ed Morales" ***@***.***> wrote: Tried lazy loading it.. and still cant replicate it. Any chance you can post the html? or a link to the repo? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#396 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEx2_d_TiMnCq947KSKM5KXrICFn_7Fyks5rh5JSgaJpZM4MPjsF> .

imVinayPandya · 2017-03-03T04:39:01Z

i have created gist please check it. if you need anything please let me know.

https://gist.github.com/imVinayPandya/a2696802d8112a9ffdf9f4e0cbf24563

imVinayPandya · 2017-03-03T04:41:59Z

@emoralesb05 sorry in gist it is not "cirlucar" and "overlay" please check logint.component.html again, i have updated gist.

emoralesb05 · 2017-03-03T06:36:23Z

Awesome, manage to replicate it. Now the hard part is actually finding the issue (which seems has something to do with ReactiveForms)

Edit: or.. tdMediaToggle

imVinayPandya · 2017-03-03T06:37:55Z

Okay let me know if i can do anything.

…

On 03-Mar-2017 12:06 PM, "Ed Morales" ***@***.***> wrote: Awesome, manage to replicate it. Now the hard part is actually finding the issue (which seems has something to do with ReactiveForms) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#396 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEx2_V-ZIA55CF7Y5Kv8DbaMX-P3Iggwks5rh7TogaJpZM4MPjsF> .

emoralesb05 · 2017-03-03T06:45:30Z

Wow haha okay, yes found the problem.

https://github.com/Teradata/covalent/blob/develop/src/platform/core/media/directives/media-toggle.directive.ts#L70

It appears that tdLoading in overlay mode is destroying the content before ngOnInit is executed (which is expected).

But since we dont check if the subscription has been craeted when trying to unsubscribe.. it throws that error.

Creating a PR to fix it real quick, for now you can just remove the use of tdMediaToggle inside tdLoading in overlay mode and it will work. 😄

emoralesb05 · 2017-03-03T06:50:10Z

#401 will fix this.

Thanks for the gist! Really helped me find the root cause.

imVinayPandya · 2017-03-03T06:57:33Z

i am not using overlay effect, using linear for now. but is ther any workaround? so, i can use overlay effect with circular type.

also in docs, i am little bit confused that it is "circular" or "circle". inside your tdLoading directive it is "circular" i think. and in docs is there is circle as type:

https://teradata.github.io/covalent/#/components/loading

and you can also see that in your doc circular loading with overlay effect is working.

emoralesb05 · 2017-03-03T07:05:35Z

Yeah, just remove tdMediaToggle for now from your html if you want to use overlay.

And yes, its a typo.. its supposed to be circular.

Its a problem introduced by using tdMediaToggle inside a tdLoading in overlay mode.

so just change <md-card tdMediaToggle="gt-xs" [mediaClasses]="['push-top-lg']"> to <md-card>

emoralesb05 · 2017-03-03T18:58:14Z

Fixed when merging #401

imVinayPandya changed the title ~~tdLoading with Overlay: Cannot read property 'unsubscribe' of undefined Error~~ Error in tdLoading with Circle Overlay: Cannot read property 'unsubscribe' of undefined Error Mar 1, 2017

emoralesb05 added investigate needs replication labels Mar 1, 2017

emoralesb05 mentioned this issue Mar 3, 2017

fix(media): check if subscription has been created before unsubscribing. (closes #396) #401

Merged

4 tasks

emoralesb05 added this to the Beta 3 milestone Mar 3, 2017

emoralesb05 added bug and removed investigate needs replication labels Mar 3, 2017

emoralesb05 closed this as completed Mar 3, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error in tdLoading with Circle Overlay: Cannot read property 'unsubscribe' of undefined Error #396

Error in tdLoading with Circle Overlay: Cannot read property 'unsubscribe' of undefined Error #396

imVinayPandya commented Mar 1, 2017 •

edited

Loading

imVinayPandya commented Mar 2, 2017

emoralesb05 commented Mar 3, 2017

imVinayPandya commented Mar 3, 2017 via email

emoralesb05 commented Mar 3, 2017

imVinayPandya commented Mar 3, 2017 via email

imVinayPandya commented Mar 3, 2017

imVinayPandya commented Mar 3, 2017

emoralesb05 commented Mar 3, 2017 •

edited

Loading

imVinayPandya commented Mar 3, 2017 via email

emoralesb05 commented Mar 3, 2017

emoralesb05 commented Mar 3, 2017 •

edited

Loading

imVinayPandya commented Mar 3, 2017 •

edited

Loading

emoralesb05 commented Mar 3, 2017 •

edited

Loading

emoralesb05 commented Mar 3, 2017

Error in tdLoading with Circle Overlay: Cannot read property 'unsubscribe' of undefined Error #396

Error in tdLoading with Circle Overlay: Cannot read property 'unsubscribe' of undefined Error #396

Comments

imVinayPandya commented Mar 1, 2017 • edited Loading

Do you want to request a feature or report a bug?

Bug Report

Which version of Angular and Material, and which browser and OS does this issue affect?

Other information

imVinayPandya commented Mar 2, 2017

emoralesb05 commented Mar 3, 2017

imVinayPandya commented Mar 3, 2017 via email

emoralesb05 commented Mar 3, 2017

imVinayPandya commented Mar 3, 2017 via email

imVinayPandya commented Mar 3, 2017

imVinayPandya commented Mar 3, 2017

emoralesb05 commented Mar 3, 2017 • edited Loading

imVinayPandya commented Mar 3, 2017 via email

emoralesb05 commented Mar 3, 2017

emoralesb05 commented Mar 3, 2017 • edited Loading

imVinayPandya commented Mar 3, 2017 • edited Loading

emoralesb05 commented Mar 3, 2017 • edited Loading

emoralesb05 commented Mar 3, 2017

imVinayPandya commented Mar 1, 2017 •

edited

Loading

emoralesb05 commented Mar 3, 2017 •

edited

Loading

emoralesb05 commented Mar 3, 2017 •

edited

Loading

imVinayPandya commented Mar 3, 2017 •

edited

Loading

emoralesb05 commented Mar 3, 2017 •

edited

Loading