Tabs navigation with nested pages

Ionic Framework
1

Hi,

Tying to build an APP with tabs and nested pages at each tab.
I started with a "ionic start tabs --type=ionic-angular witch created a tabs APP but now I am tying to understand who to add sub-pages to each tab and navigate between the pages.

All the tutorials I have seen mention a file called " app-routing.module.ts" which does not exist in the file structure created by Ionic. and once I create that file these tutorials have inside that file an import of ‘@angular/router’ which renders an error saying that that module can not be found.

Do you know of a GOOD current tutorial which can explain who tab navigation in Ionic works and who to implement it ?

Any help will be appreciated

Erez

windows
ionic -v == 6.2.0
node --version == 12.16.1
cordova -v == 9.0.0 (cordova-lib@9.0.1)
ng --version == @angular-devkit/architect 0.900.5 (cli-only)
@angular-devkit/build-optimizer 0.0.35
@angular-devkit/core 9.0.5 (cli-only)
@angular-devkit/schematics 9.0.5 (cli-only)
@schematics/angular 9.0.5 (cli-only)
@schematics/update 0.900.5 (cli-only)
rxjs 5.5.11
typescript 2.6.2
webpack 3.12.0

2

If you’re starting a new project, you want the angular type, not ionic-angular.

I would strongly suggest sticking to authoritative documentation from Ionic and Angular here.

3

thanks for the replay.

I tried both --type=angular and --type=ionic-angular no of them create a router module in the tabs app.

I started with a “authoritative documentation” the Angular documentation and the Ionic documentation. Again they describe a router module witch is not created by the ionic start command and when I try to add the missing files the @angular/router is not recognized.

I am not even shore that the Ionic document is current because the entire file structure created by the Ionic start is different than the file structure described in the Ionic documentation.

Also the Ionic documentation describe only bits and peaces. I could not find a complete tutorial or description of the implementation of APP navigation in the Ionic official documentation.

I’ll appreciate If you direct me to a working tutorial or example.

4 
$ ionic start --type=angular scratchy tabs | grep routing.module.ts 2>&1
 create mode 100644 src/app/app-routing.module.ts
 create mode 100644 src/app/tabs/tabs-routing.module.ts

I am looking at Open-Source UI Toolkit to Create Your Own Mobile Apps. Is that what you are describing?

I don’t work for or speak for Ionic, but I can say that I don’t use Ionic’s starter templates (aside from blank), generators, or lazy-loading module structure. I don’t say this to throw shade on these things, as much to emphasize that you are under no compulsion to do anything involving code structure or routing with them. It is perfectly possible to create an Ionic app using any navigation system you desire or are familiar with.

5

I mast be doing something wrong, I don’t get these modules.
I’ll try to update everything again maybe something is missing.

I was looking on the same documentation you pointed to. They assume that you already know Ionic so they don’t give a full description.

Thanks, I’ll go back to the docs see if I can make sense out of them.

6

Hi @ehboym!
I think you need to update your Ionic environment.
About your ionic info command, it doesn’t show the really Ionic version like this:

Ionic Framework               : @ionic/angular 5.0.5

You are showing jus the CLI version:

Ionic CLI                     : 6.2.1

It’s a small detail, but need to check everything around it.
To update the Ionic version do the commands below:

$ npm uninstall -g ionic && npm install -g ionic

It may require the sudo permission, depending on your installations.
Start a new fresh installation and let’s see the results.
To start a new Ionic App do the following commands:

$ ionic start myApp tabs --type=ionic-angular

Change ‘myApp’ to your desired App name.
Hope it helps you.

7

Hi,

Thanks, I uninstalled everything and reinstalled from scratch.
Fixed the problem.