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.


Log in to reply