Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v4-beta.18 - Error: Template parse errors: 'ion-tab' is not a known element

See original GitHub issue

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Update from beta.17 to beta.18

Expected behavior:

Site would work

Steps to reproduce:

Related code:

A sample application via GitHub

Ref: https://github.com/peterennis/aetabs/commit/ed7286315edc575b5bfa7691c710868903ee1b6e Current site running beta.17 : https://aetabs.adaept.com capture468

Result running beta.18 capture466

Other information:

I am using tabs with sidemenu. There is no official sample. I read breaking changes, tried the suggestions, but could not get it to work.

@manucorporat Possibly related: https://github.com/ionic-team/ionic/issues/16343

Ionic info:

C:\ae\adaept.com\aetabs>ionic info

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (C:\Users\peter\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.18
   @angular-devkit/build-angular : 0.11.3
   @angular-devkit/schematics    : 7.1.3
   @angular/cli                  : 7.1.3
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (2 plugins total)

System:

   NodeJS : v10.14.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Issue Analytics

State:
Created 5 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

paulstelzercommented, Dec 16, 2018

Thanks for your issue! ion-tab is not a known element in beta.18 / beta.19, that is correct. Read the breaking changes again -> https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#angular-tabs

There you see that you have to remove the ion-tab. I close this here but you can still comment here if you don’t get it work. Example:

<ion-tabs>
   <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
       <ion-icon name="flash"></ion-icon>
       <ion-label>Tab One</ion-label>
     </ion-tab-button>

    <ion-tab-button tab="tab2">
       <ion-icon name="apps"></ion-icon>
       <ion-label>Tab Two</ion-label>
     </ion-tab-button>

    <ion-tab-button tab="tab3">
       <ion-icon name="send"></ion-icon>
       <ion-label>Tab Three</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
 </ion-tabs>

Or see usage in Angular -> https://github.com/ionic-team/ionic/tree/master/core/src/components/tabs#angular

0reactions

ionitron-bot[bot]commented, Jan 16, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.