Monaca Onsen UI Discord Chat Github Repo

TypeError: Cannot read property 'newAnimator' of undefined



  • 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
    


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


  • Onsen UI

    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.