TypeError: Cannot read property 'newAnimator' of undefined

[vgriffin]

I’ve tried this with
ngx-onsenui 4.0.0-rc1 / onsenui 2.3.3 and
ngx-onsenui 4.1.0 / onsenui 2.5.3
with the same result

Everything else is current. I’m using Chrome on Windows 10.

I’m trying to get <ons-tabbar> to work. I’m using Angular 4. I’m using separate ts and html files and have commented stuff out to provide a minimal set that reproduces the problem. The displayed ts files just log their constructor and ngOnInit access. The AppComponent file also defines the components used in its html.

I’ve got a minimal index.html file and main.ts includes ons-ready.

app-component.html:

<ons-tabbar animation="none">
  <ons-tab [page]="initPageComponent" label="Init page" active badge="7">
    <ons-icon icon="md-home" size="24px"></ons-icon>
  </ons-tab>
  <ons-tab [page]="pageAComponent" label="Page A">
    <ons-icon icon="md-settings" size="24px"></ons-icon>
  </ons-tab>
  <ons-tab [page]="pageBComponent" label="Page B">
    <ons-icon icon="md-pizza" size="24px"></ons-icon>
  </ons-tab>
</ons-tabbar>

xxx-component.html (with commented-out code omitted):
They all have slightly different displayed text.

<ons-page>
  Hello
</ons-page>

The <ons-tabbar> is displayed, but no page contents are displayed. The console output, including logs and the error info follows:

main.ts:15 ons.ready!
app.component.ts:28 construct AppComponent
app.component.ts:33 ngOnInit AppComponent
core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
init-page.component.ts:18 construct InitPageComponent
page-a.component.ts:18 construct PageAComponent
page-b.component.ts:18 construct PageBComponent
init-page.component.ts:24 ngOnInit InitPageComponent
page-a.component.ts:24 ngOnInit PageAComponent
page-b.component.ts:24 ngOnInit PageBComponent
core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'newAnimator' of undefined
TypeError: Cannot read property 'newAnimator' of undefined
    at HTMLElement._switchPage (onsenui.js:8845)
    at onsenui.js:8966
    at HTMLElement._loadPageElement (onsenui.js:8293)
    at onsenui.js:8963
    at new ZoneAwarePromise (zone.js:861)
    at HTMLElement.setActiveTab (onsenui.js:8962)
    at HTMLElement._onClick (onsenui.js:8215)
    at onReady (onsenui.js:8344)
    at Object.ready (onsenui.js:8564)
    at onsenui.js:8349
    at HTMLElement._switchPage (onsenui.js:8845)
    at onsenui.js:8966
    at HTMLElement._loadPageElement (onsenui.js:8293)
    at onsenui.js:8963
    at new ZoneAwarePromise (zone.js:861)
    at HTMLElement.setActiveTab (onsenui.js:8962)
    at HTMLElement._onClick (onsenui.js:8215)
    at onReady (onsenui.js:8344)
    at Object.ready (onsenui.js:8564)
    at onsenui.js:8349
    at resolvePromise (zone.js:795)
    at new ZoneAwarePromise (zone.js:864)
    at HTMLElement.setActiveTab (onsenui.js:8962)
    at HTMLElement._onClick (onsenui.js:8215)
    at onReady (onsenui.js:8344)
    at Object.ready (onsenui.js:8564)
    at onsenui.js:8349
    at onsenui.js:734
    at Array.forEach (<anonymous>)
    at consumeQueue (onsenui.js:733)

defaultErrorLogger	@	core.es5.js:1020
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError	@	core.es5.js:1080
next	@	core.es5.js:4503
schedulerFn	@	core.es5.js:3635
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub	@	Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next	@	Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next	@	Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next	@	Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next	@	Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit	@	core.es5.js:3621
(anonymous)	@	core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke	@	zone.js:392
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run	@	zone.js:142
webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular	@	core.es5.js:3844
onHandleError	@	core.es5.js:3912
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError	@	zone.js:396
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runGuarded	@	zone.js:158
_loop_1	@	zone.js:673
api.microtaskDrainDone	@	zone.js:682
drainMicroTaskQueue	@	zone.js:610
Promise resolved (async)		
scheduleMicroTask	@	zone.js:585
resolvePromise	@	zone.js:805
ZoneAwarePromise	@	zone.js:864
setActiveTab	@	onsenui.js:8962
_onClick	@	onsenui.js:8215
onReady	@	onsenui.js:8344
ready	@	onsenui.js:8564
(anonymous)	@	onsenui.js:8349
(anonymous)	@	onsenui.js:734
consumeQueue	@	onsenui.js:733
contentReady	@	onsenui.js:744
connectedCallback	@	onsenui.js:8320
connectedCallback	@	onsenui.js:2816
connectTree	@	onsenui.js:2600
(anonymous)	@	onsenui.js:35855
_compile	@	onsenui.js:8757
(anonymous)	@	onsenui.js:8707
(anonymous)	@	onsenui.js:734
consumeQueue	@	onsenui.js:733
(anonymous)	@	onsenui.js:750
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke	@	zone.js:392
onInvoke	@	core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke	@	zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runGuarded	@	zone.js:155
(anonymous)	@	zone.js:133
childList (async)		
(anonymous)	@	onsenui.js:35848
webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.appendChild	@	platform-browser.es5.js:2761
webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.appendChild	@	core.es5.js:13626
createText	@	core.es5.js:11796
createViewNodes	@	core.es5.js:12189
callViewAction	@	core.es5.js:12654
execComponentViewsAction	@	core.es5.js:12563
createViewNodes	@	core.es5.js:12232
createRootView	@	core.es5.js:12100
callWithDebugContext	@	core.es5.js:13486
debugCreateRootView	@	core.es5.js:12803
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create	@	core.es5.js:9872
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create	@	core.es5.js:3333
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap	@	core.es5.js:4768
(anonymous)	@	core.es5.js:4546
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap	@	core.es5.js:4546
(anonymous)	@	core.es5.js:4508
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke	@	zone.js:392
onInvoke	@	core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke	@	zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run	@	zone.js:142
(anonymous)	@	zone.js:844
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask	@	zone.js:425
onInvokeTask	@	core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask	@	zone.js:424
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask	@	zone.js:192
drainMicroTaskQueue	@	zone.js:602
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask	@	zone.js:503
invokeTask	@	zone.js:1427
globalZoneAwareCallback

[vgriffin]

If I remove the “active” setting, the problem doesn’t occur, but I don’t have content displayed.

[asial-matagawa]

Hi, @vgriffin !

This problem is a bug of Onsen UI Core and related to this issue ticket (OnsenUI/OnsenUI#1926).

You can avoid the problem by
(1) Keep the content of <ons-tab> empty and use icon attribute of <ons-tab>.

<ons-tabbar animation="none">
  <ons-tab [page]="initPageComponent" icon="md-home" label="Init page" active badge="7"></ons-tab>
  <ons-tab [page]="pageAComponent" icon="md-settings" label="Page A"></ons-tab>
  <ons-tab [page]="pageBComponent" icon="md-pizza" label="Page B"></ons-tab>
</ons-tabbar>

or
(2) Put <div class="tabbar__content"></div> and wrap the <ons-tab>s with <div class="tabbar"></div>

<ons-tabbar animation="none">
  <div class="tabbar__content"></div>
  <div class="tabbar">
    <ons-tab [page]="initPageComponent" label="Init page" active badge="7">
      <ons-icon icon="md-home" size="24px"></ons-icon>
    </ons-tab>
    <ons-tab [page]="pageAComponent" label="Page A">
      <ons-icon icon="md-settings" size="24px"></ons-icon>
    </ons-tab>
    <ons-tab [page]="pageBComponent" label="Page B">
      <ons-icon icon="md-pizza" size="24px"></ons-icon>
    </ons-tab>
  </div>
</ons-tabbar>

Thank you.