I had, in fact, tried placing <ons-navigator> around my <ons-page>, inside my <ons-page> around all of the content, and as a landing page from <ons-tab>, using the [page] directive to point to my page.

I have tried every way I can think of to make my <ons-page> a child of an <ons-navigator>

The last variant worked without using the <ons-tabbar> and <ons-tab> elements. I suspect that the <ons-navigator> needs to be the outermost item from things I’ve seen in the documentation, but if I try to go there from an <ons-tab>, the code wraps the <ons-navigator> in <ons-page>.

What I would really like to see is sample code that actually does what I want.

If I create a service, is it sufficient to create a Component where the template is just: <ons-navigator></ons-navigator> and the constructor gets the OnsNavigator injected. Then can I just retrieve the navigator using that navigator? I’ve now tried several ways to create a service, but still haven’t figured out how to get an OnsNavigator into anything to use as a service. I don’t know how to instantiate a component directly in a service.
I want the navigator and tabbar to be available simultaneously. According to everything I’ve read, a Component is part of the DOM and associated with the View process. This seems to imply that any Component containing an <ons-navigator> would itself have to be “between” the tabbar and its viewable area, or it wouldn’t work. I have not figured out how to make one work.

If it’s possible to create an <ons-tabbar> where multiple button targets are <ons-navigator> elements, using the current ngx-onsenui and onsenui, there should be a test case for it. If so, please post it. If there isn’t a test case, maybe it doesn’t actually work. I’ve used every example I can find, and variations on them. I hope I’m just overlooking something obvious. I don’t have nearly as much experience in Angular 4 or Onsen UI as I do in many other languages, so it may well be something I’m doing.

I have gotten <ons-navigator> and <ons-tabbar> elements working, and I like them. I just can’t figure out how to get them to work together.

I’m using Angular 4, onsenui 2.5.3, and ngx-onsenui 4.1.0. I want to have the <ons-tabbar> always displayed, but I want other pages to be part of the app as well. Without the tabbar, I could use an <ons-navigator> to move around as desired. I’ve read everything I could find and think the right solution is to put the ons-navigator where a page invoked by an ons-tab can find it.

I’m doing pretty strict separation between my Component code and the html, placing templates and css into separate files, and minimizing use of scripts in the html.

I haven’t been able to figure out where to put the <ons-navigator> element where the Component’s constructor will find it! Every place I’ve tried has resulted in “ERROR Error: No provider for OnsNavigator!” if I try to inject an OnsNavigator into the constructor.

It may be a problem caused by wrapping all managed elements inside <ons-page>, which could make it difficult to solve if that upsets <ons-navigator> handling.

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

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

@Fran-Diox
It explicitly doesn’t work on the current version of the wrapper for Angular 2+. It may be an issue related to processing *ngFor. I found the problem when I tried to affect the background-color by attaching the class to the ons-list-item and having my display come out in white-on-white…

This version is 4.0.0.rc1, so they should be able to deal with it!

Assume CSS contains:
.my-class { background-color: pink; }

If I’m using ul/li with Angular 4, the following code gives each list item a pink background

<ul>
  <li class="my-class" *ngFor="let item of items">
    {{item}}
  </li>
</ul>

I had hoped and expected ons-list /ons-list-item to behave the same way, so the code below would give each list item a pink background.

<ons-list>
  <ons-list-item class="my-class" *ngFor="let item of items">
    {{item}}
  </ons-list-item>
</ons-list>

It doesn’t, but the following code does

<ons-list>
  <ons-list-item *ngFor="let item of items">
    <div class="my-class">
      {{item}}
    </div>
  </ons-list-item>
</ons-list>

The problem is that the generated code for each {{item}} is wrapped in

<div class="center list-item__center">
</div>

The result is that the {{item}} is set to a style over which I have no control in the <ons-list-item>

I’m using ngx-onsenui 4.0.0-rc.1 and have tried onsenui 2.3.3 and onsenui 2.5.3 with the same results. (I patched the package.json of ngx-onsenui to use the later version.) Obviously, the code above is a fragment of my actual code.

Ideally, the ons- components would behave like the standard ones on which they are based. I appreciate that frameworking “magic” can make this difficult, but it took hours to figure out what was happening and to work around it!

@asial-matagawa

I tried to install that version and got the following error, which does not occur for the current version of onsenui:

npm ERR! code 129
npm ERR! Command failed: C:\Program Files (x86)\Git\cmd\git.CMD clone --depth=1 -q -b 1.0.0-rc.3+mod.20170410.1 git:
//github.com/OnsenUI/custom-elements.git C:\Users\Valerie\AppData\Roaming\npm-cache_cacache\tmp\git-clone-aa33e141
–config core.longpaths=true
npm ERR! error: unknown option `config’

I’m running Windows 10. My git version is 1.7.6.msysgit.0

I know there’s a later version available, but don’t have time right now to do that upgrade. I’ll try to do it later today so I can test the ons-list problem against a more supported version of onsen

I did some internal exploration and saw that ngx-onsenui/CHANGELOG.md includes a line saying that a bug fix had removed that dependency, so I removed the dependency as a workaround… I made the assumption that there will be a new release before I’m close enough to real testing for it to matter. If I run into other problems (like one I found with ons-list-item that I’ll describe in another post), I’ll test with the older onsenui. (I’ve written a lot of system-level code in many languages.) I’ll keep using this bandage until I find something I can’t work around or you release the version you’re working on!

On https://onsen.io/v2/guide/angular2/ you say that I can add Angular 2+ support by requesting:

npm install onsenui ngx-onsenui --save

but that doesn’t work because the modules are not compatible.

If I issue the command followed by an immediate npm list, I see the error message:

npm ERR! peer dep missing: onsenui@~2.3.3, required by ngx-onsenui@4.0.0-rc.1