Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: <root> ; 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?