Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ERROR DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. #631

Closed
ranouf opened this issue May 27, 2017 · 5 comments
Closed

ERROR DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. #631

ranouf opened this issue May 27, 2017 · 5 comments

Comments

@ranouf
Copy link

ranouf commented May 27, 2017 •
edited
Loading

package.json (remove the space after @ )

"dependencies": {
"@ angular/animations": "^4.0.0",
"@ angular/common": "^4.0.0",
"@ angular/compiler": "^4.0.0",
"@ angular/core": "^4.0.0",
"@ angular/forms": "^4.0.0",
"@ angular/http": "^4.0.0",
"@ angular/material": "2.0.0-beta.5",
"@ angular/platform-browser": "^4.0.0",
"@ angular/platform-browser-dynamic": "^4.0.0",
"@ angular/platform-server": "^4.0.0",
"@ angular/router": "^4.0.0",
"@ covalent/core": "1.0.0-beta.4",
"@ types/node": "7.0.18",
"@ angular/flex-layout": "2.0.0-beta.8",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^2.0.5",
"aspnet-webpack": "^1.0.29",
"awesome-typescript-loader": "3.1.3",
"css": "2.2.1",
"css-loader": "0.28.1",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.0",
"file-loader": "0.11.1",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"preboot": "4.5.2",
"reflect-metadata": "0.1.10",
"rxjs": "^5.0.1",
"style-loader": "0.17.0",
"to-string-loader": "1.1.5",
"typescript": "2.3.2",
"url-loader": "0.5.8",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.0",
"webpack-merge": "4.1.0",
"zone.js": "^0.8.4",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.5",
"angular2-jwt": "^0.2.3",
"auth0-js": "^8.7.0",
"auth0-lock": "^10.16.0",
"hammerjs": "^2.0.8"
},
"devDependencies": {
"@types/chai": "3.5.2",
"@types/jasmine": "2.5.47",
"@types/hammerjs": "^2.0.34",
"chai": "3.5.0",
"jasmine-core": "2.6.1",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"node-sass": "^4.5.3"
}

html file:

> <md-card tdMediaToggle="gt-xs" [mediaClasses]="['push']">
>     <!--<ng-template tdLoading="shop.edit">-->
>         <!--<md-card-title>
>             Feature Form
>         </md-card-title>
>         <md-divider></md-divider>-->
>         <md-card-content class="push-bottom-none">
>             <form #featureForm="ngForm">
>                 <md-tab-group md-stretch-tabs>
>                     <md-tab>
>                         <template md-tab-label>
>                             <span class="hide-gt-767">Details</span>
>                             <span class="show-767"><md-icon md-list-avatar>info</md-icon></span>
>                         </template>
>                         <div layout="row" layout-margin>
>                             <h2 layout-margin>Details</h2>
>                         </div>
> 
>                         <div layout="row">
>                             <md-input-container flex>
>                                 <input mdInput
>                                        #nameElement
>                                        #nameControl="ngModel"
>                                        type="text"
>                                        placeholder="Name"
>                                        [(ngModel)]="shopChain.name"
>                                        name="name"
>                                        maxlength="30"
>                                        required>
>                                 <md-hint align="start">
>                                     <span [hidden]="nameElement.pristine || !nameElement.errors?.required" class="tc-red-600">Required</span>
>                                 </md-hint>
>                                 <md-hint align="end">{{nameElement.value.length}} / 30</md-hint>
>                             </md-input-container>
>                         </div>
>                     </md-tab>
> 
>                     <md-tab>
>                         <template md-tab-label>
>                             <span class="hide-gt-767">Permissions</span>
>                             <span class="show-767"><md-icon md-list-avatar>person</md-icon></span>
>                         </template>
>                         <user-permissions [(allowedUserIds)]="shopChain.allowedUserIds"></user-permissions>
>                     </md-tab>
>                 </md-tab-group>
>             </form>
>         </md-card-content>
>         <md-divider></md-divider>
>         <md-card-actions>
>             <button md-button [disabled]="!featureForm.valid" color="primary" (click)="submit()">SAVE</button>
>             <button md-button (click)="cancel()">CANCEL</button>
>         </md-card-actions>
>     <!--</ng-template>-->
> </md-card>

If I remove all "md-tab-group ", "md-tab", I have no error.

With the md-tab-group I have these errors:

TdLoadingComponent.html:1 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 0, nodeDef: Object, elDef: Object, elView: Object}
View_TdLoadingComponent_0 @ TdLoadingComponent.html:1
proxyClass @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:79497
DebugContext_.logError @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:13404
ErrorHandler.handleError @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:1429
ApplicationRef_.tick @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:5340
(anonymous) @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:5213
ZoneDelegate.invoke @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117959
onInvoke @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:4408
ZoneDelegate.invoke @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117958
Zone.run @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117719
NgZone.run @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:4276
next @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:5213
schedulerFn @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:4110
SafeSubscriber.__tryOrUnsub @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:41070
SafeSubscriber.next @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:41017
Subscriber._next @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:40957
Subscriber.next @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:40921
Subject.next @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:47372
EventEmitter.emit @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:4096
NgZone.checkStable @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:4373
NgZone.onLeave @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:4449
onInvokeTask @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:4402
ZoneDelegate.invokeTask @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117991
Zone.runTask @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117759
ZoneTask.invoke @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118054
timer @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:119069
vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118208 Unhandled Promise rejection: Cannot read property 'play' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'play' of undefined
at WebAnimationsPlayer.play (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:94203)
at _loop_2 (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93481)
at InjectableAnimationEngine.DomAnimationEngine._flushQueuedAnimations (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93486)
at InjectableAnimationEngine.DomAnimationEngine.flush (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93507)
at animations.es5.js:263
at ZoneDelegate.invoke (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117959)
at Zone.run (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117719)
at vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118383
at ZoneDelegate.invokeTask (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117992)
at Zone.runTask (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117759) TypeError: Cannot read property 'play' of undefined
at WebAnimationsPlayer.play (http://localhost:53059/dist/vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:94203:21)
at _loop_2 (http://localhost:53059/dist/vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93481:24)
at InjectableAnimationEngine.DomAnimationEngine._flushQueuedAnimations (http://localhost:53059/dist/vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93486:27)
at InjectableAnimationEngine.DomAnimationEngine.flush (http://localhost:53059/dist/vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93507:14)
at http://localhost:53059/dist/main-client.js?v=c5SzXHcV7MwraaofkoUWoVdkJlszR-r-SqBnOI9HQQs:5467:35
at ZoneDelegate.invoke (http://localhost:53059/dist/vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117959:26)
at Zone.run (http://localhost:53059/dist/vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117719:43)
at http://localhost:53059/dist/vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118383:57
at ZoneDelegate.invokeTask (http://localhost:53059/dist/vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117992:31)
at Zone.runTask (http://localhost:53059/dist/vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117759:47)
api.onUnhandledError @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118208
handleUnhandledRejection @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118232
_loop_1 @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118223
api.microtaskDrainDone @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118227
drainMicroTaskQueue @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118160
ZoneTask.invoke @ vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118058
vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118210 Error: Uncaught (in promise): TypeError: Cannot read property 'play' of undefined
TypeError: Cannot read property 'play' of undefined
at WebAnimationsPlayer.play (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:94203)
at _loop_2 (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93481)
at InjectableAnimationEngine.DomAnimationEngine._flushQueuedAnimations (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93486)
at InjectableAnimationEngine.DomAnimationEngine.flush (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93507)
at animations.es5.js:263
at ZoneDelegate.invoke (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117959)
at Zone.run (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117719)
at vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118383
at ZoneDelegate.invokeTask (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117992)
at Zone.runTask (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117759)
at WebAnimationsPlayer.play (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:94203)
at _loop_2 (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93481)
at InjectableAnimationEngine.DomAnimationEngine._flushQueuedAnimations (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93486)
at InjectableAnimationEngine.DomAnimationEngine.flush (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:93507)
at animations.es5.js:263
at ZoneDelegate.invoke (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117959)
at Zone.run (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117719)
at vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118383
at ZoneDelegate.invokeTask (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117992)
at Zone.runTask (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117759)
at resolvePromise (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118335)
at vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118386
at ZoneDelegate.invokeTask (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117992)
at Zone.runTask (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:117759)
at drainMicroTaskQueue (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118152)
at XMLHttpRequest.ZoneTask.invoke (vendor.js?v=4TEDpQ6Y3TDx3ql_Ch15mkMiN5hCU6fZX88_GgkpSqo:118058)

I was with Angular 2 yesterday, I saw had the same problem, his solution was to upgrade to a new version, I spent the day to upgrade, but the problem is still there :(.

Can you help me?
@emoralesb05
Copy link
Contributor

Can you create a plnkr with the error?

@ranouf
Copy link
Author

ranouf commented Jun 5, 2017

What I did was to remove the tdLoading from child component.
It s not ideal, but at least, I dont have an error anymore.

@ranouf ranouf closed this as completed Jun 5, 2017
@emoralesb05
Copy link
Contributor

huh, not sure if its a problem with md-tabs when they are removed from DOM..

@emoralesb05
Copy link
Contributor

angular/components#4271

@ranouf
Copy link
Author

ranouf commented Jun 5, 2017 •
edited
Loading

Yes, it probably due to that.
I hope this bug will be fixed soon :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ranouf @emoralesb05