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 resultEverything 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.
-
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 useiconattribute 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.
