BUG? FAB fails with __zone_symbol__setTimeout?

Ionic Framework ionic-v3
1

I copy pasted the expandable fab example code from the documentation and clicking on it in the browser fails with:

Runtime Error
Cannot read property '__zone_symbol__setTimeout' of undefined

How can I fix this? This is really the standard FAB code, nothing more…

<ion-fab bottom center>
  <button ion-fab><b>Hi</b></button>
  <ion-fab-list>
    <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
    <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
  </ion-fab-list>
</ion-fab>

TypeError: Cannot read property '__zone_symbol__setTimeout' of undefined
    at Platform.timeout (http://localhost:8100/build/vendor.js:15908:19)
    at http://localhost:8100/build/vendor.js:65306:28
    at Array.forEach (<anonymous>)
    at FabList.setVisible (http://localhost:8100/build/vendor.js:65305:18)
    at FabContainer.setActiveLists (http://localhost:8100/build/vendor.js:76497:18)
    at FabContainer.toggleList (http://localhost:8100/build/vendor.js:76483:14)
    at FabContainer.clickHandler (http://localhost:8100/build/vendor.js:76463:18)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9967)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4499:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9888)
Ionic Framework: 3.6.1
Ionic App Scripts: 2.1.4
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.9.2
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
2

Could you provide a link please?

3

Hm, not sure how I could partially extract it out of my app to post it somewhere…

4

You say you implemented something from the documentation. I have no idea what documentation you are talking about.

5

Sorry, here’s the link:

1 Like
6

Can you put an icon in the button as in the docs and see if this changes anything?
Maybe really copy/pasting an exmaple straight from the docs?

7

I tried just before to remove all icons from the item buttons, but it still fails.
I thought to create a clean new project to see if it’s on my project configuration?

8

But there’s no additional library FABs would depend on, no?

9

I created a new project based on blank and added the FAB. Here, it works. I assume it must have something to do with my project. Maybe some memory conflict. I do not know.

When I break into the line where it fails:

fab-list.js

ll 76

      if (visible) {
            fabs.forEach(function (fab) {
                _this._plt.timeout(function () { return fab.setElementClass('show', true); }, i * 30);
                i++;
            });
        }

I can see that _this has the right properties

_this._plt.timeout
ƒ (callback, timeout) {
        var /** @type {?} */ win = this._win;
        return win['__zone_symbol__setTimeout'](callback, timeout);
    }

and fab is of right type too. However, when it calls the timeout function, it fails with undefined.

_this._win is not defined in this case.

10

Finally solved it. I am using a Lefalet.js map and included it as

<ion-content>
<div id='map'></div>
<fab></fab>
</ion-content>

Moving id=map to ion-content solved it. Thanks for any input trying to help!