Ionic template parse error, Ionic select, npm and Ionic versions

Question

I'm getting the error: ion-select-option' is not a known element.

This works:

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select placeholder="Select One">
      <ion-option value="f">Female</ion-option>
      <ion-option value="m">Male</ion-option>
    </ion-select>
  </ion-item>

But this does not work:

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select placeholder="Select One">
      <ion-select-option value="f">Female</ion-select-option>
      <ion-select-option value="m">Male</ion-select-option>
    </ion-select>
  </ion-item>

(ion-option does pop up with radio buttons, I'm looking for an Ionic form select option that does not do the pop-up, but acts similar to regular HTML single form select. I'm not sure if Ionic offers such an option, that is why I'm trying ion-select-option.)

After doing some research on different forums, I see the recommendation that I should update my Ionic to 4.0+ in order to be able to use ion-select-option.

I'm new to npm and confused. When I run npm outdated, I see that I'm running @ionic-native/core 4.4.0:

#npm outdated
Package                            Current  Wanted  Latest  Location
@ionic-native/core                   4.4.0  4.20.0  5.18.0  cart

But when I get the Error: Template parse errors and Ionic versions, at the bottom of the browser page, it gives me these version information:

Ionic Framework: 3.9.2 
Ionic App Scripts: 3.2.4
Angular Core: 5.0.3

I really appreciate any help on this.

Why at the bottom of the browser (when there is an error) says that I'm running Ionic Framework 3.9.2, but when I run npm outdated, it shows that I'm running @ionic-native/core 4.4.0?
Does Ionic offer a select option similar to HTML select rather than POP up radio button?

user9088454 user9088454 · Accepted Answer · 2019-12-09T12:19:26

You are using ionic 3.

Example ionic-v3 ion-select:

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select>
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>
</ion-item>

Example ionic-v4 ion-select:

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select placeholder="Select One">
      <ion-select-option value="f">Female</ion-select-option>
      <ion-select-option value="m">Male</ion-select-option>
    </ion-select>
  </ion-item>

In ionic 3 and 4 both have different component it won't work with each other. If you wish to update ionic then use this cmd:

npm i -g ionic

OR want to install specific version try this

npm i -g ionic@here your version number

ex: npm i -g [email protected]

But in your case, you are using ionic-v3.9.2. So you can use ionic 3, it's fine and v3.9 is a stable version.

Ionic template parse error, Ionic select, npm and Ionic versions

1 Answers