Ngx-chips: animation error: The provided timing value "" is invalid.

[jamalx31]

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request/question

Current behavior
throws the error

ERROR Error: Unable to process animations due to the following failed trigger transitions
@animation has failed due to:
- Please provide a value for the animation param enter
- The provided timing value "" is invalid.

Expected behavior
no errors

Minimal reproduction of the problem with instructions (if applicable)
<tag-input [(ngModel)]="tags" ></tag-input>

What do you use to build your app? (SystemJS, Webpack, angular-cli, etc.). Please specify the version
angular/cli: 1.0.0
node: 7.7.3

Angular version:
^4

ng2-tag-input version:
"ngx-chips": "^1.4.5"

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
all

[Gbuomprisco]

What precise angular version are you using?

[reco]

i work with jamal. we use

@angular/cli: 1.2.0
node: 7.10.0
os: darwin x64
@angular/animations: 4.2.6
@angular/cdk: 2.0.0-beta.8
@angular/cli: 1.2.0
@angular/common: 4.2.6
@angular/compiler: 4.2.6
@angular/compiler-cli: 4.2.6
@angular/core: 4.2.6
@angular/flex-layout: 2.0.0-beta.7
@angular/forms: 4.2.6
@angular/http: 4.2.6
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.2.6
@angular/platform-browser-dynamic: 4.2.6
@angular/platform-server: 4.2.6
@angular/router: 4.2.6
@angular/language-service: 4.2.6

[Gbuomprisco]

I'll have a look at this soon, for now try downgrading to 1.4.5-beta

[reco]

same problem with [email protected]

ERROR Error: Unable to process animations due to the following failed trigger transitions
@animation has failed due to:
- Please provide a value for the animation param enter
- The provided timing value "" is invalid.

[Gbuomprisco]

I don't seem able to reproduce

[reco]

we have the same issue on [email protected] and [email protected].

[feliksg]

I have the same issue with

"@angular/animations": "^4.2.6",
"ngx-chips": "^1.4.5"

[dlhdesign]

I get this on [email protected] when I initiate the tag-input with an initial value. When no initial value is present, the error is not shown.

Note that I also received the error on every add/remove of an item (via patchValue on the form item) when I set the animationDuration key without binding it (ex: ... animationDuration="{enter:'0ms',leave:'0ms'}" ...). When I bound it, the string value is converted to the required object (ex: ... [animationDuration]="{enter:'0ms',leave:'0ms'}" ...).

[Gbuomprisco]

alright, I think I'll need to update the animations in https://github.com/Gbuomprisco/ng2-material-dropdown/blob/master/src/modules/components/menu/ng2-dropdown-menu.ts#L30

Indeed, by removing the dropdown, it works OK

[feliksg]

@Gbuomprisco Would you be able to push this fix (85ddc7a6d5ef300eaaf37bf5cf4e5dae4b1626cf) up to npm please? I believe that resolves our issue.

[jamalx31]

@Gbuomprisco please update us when you do

[Gbuomprisco]

1.4.6 is out but does not solve the animations issue

[ghost]

was this solved with the fix (85ddc7a)???

[Gbuomprisco]

Hi guys can anyone check if you still have the same issue with v1.4.7?

[ghost]

I am still having this problem. Whenever i have content in the variable bound, it gives that error:

Error: Unable to process animations due to the following failed trigger transitions
@animation has failed due to:

• Please provide a value for the animation param enter
• The provided timing value "" is invalid.

the tag im using is:

If the variable bound is empty, and i add new tags, it works just fine.

[feliksg]

I can also confirm what @mszpereira stated

[Gbuomprisco]

Can anyone provide a plunkr in which you reproduce this error? Reason: I am unable to reproduce with my local settings

My package.json:

"dependencies": {
    "@angular/animations": "^4.3.0",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/router": "^4.3.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.4",
    "@ngrx/store": "^2.2.3",
    "core-js": "^2.4.1",
    "ngx-chips": "^1.4.7",
    "reselect": "^3.0.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  }

Another try: if you disable the animation, what happens? Try this:

<tag-input [ngModel]="['model']" [@.disabled]="true"></tag-input>

[ghost]

Even though i did import BrowserAnimationsModule in my app.module file, when using this new option to disable animation, i somehow got:

Error: Found the synthetic property @.disabled. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

[Gbuomprisco]

Please include a plunkr, I can't really help without knowing your setup in fully detail.

[dlhdesign]

https://plnkr.co/edit/Wu9qw8?p=preview

The problem likely stems (in my case, at least) from the use of the FormGroup?

[Gbuomprisco]

Exact, if you use ngModel, it seems that does not happen (no clue why, though)

[Gbuomprisco]

This https://github.com/Gbuomprisco/ngx-chips/pull/519 should solve it guys

[Gbuomprisco]

v1.4.8 is out - if anyone could check, it would be great!

[feliksg]

@Gbuomprisco 1.4.8 resolved the issue for me, thanks so much!

[Gbuomprisco]

Great, closing as I hope it will work for everyone

[dlhdesign]

Now getting this:
ERROR TypeError: _this.autocompleteObservable(...).first is not a function at TagInputDropdown.getItemsFromObservable (ngx-chips.bundle.js:1309)

https://plnkr.co/edit/Wu9qw8?p=preview

(Looks like this was introduced in 1.4.7; not 1.4.8.)

[Gbuomprisco]

https://plnkr.co/edit/8Yl41KUksqOLNJQEypsM?p=preview

ngx-chips requires these peer deps:

import 'rxjs/add/observable/of';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/debounceTime';

[dlhdesign]

Gotcha; I was missing first in my environment. 1.4.8 works for me on the reported issue; thanks!

[Gbuomprisco]

yeah i should add it to the package.json actually