ionic-cli: 10 rules skipped due to selector errors

July 2022. Just upgraded to Angular 14 and Ionic 6. Experiencing this as well and cannot locate anything online to suppress or remove them. Well anything that actually works. Plus after correcting all of the build errors the app build is just a white screen on android

+1 on this, almost 2 years old though so wont get my hopes up

Hi guys,

This is my very first comment ever in any community/issue. Apologies in advance if I am not following any rules or best practices.

I was facing the same errors in prod mode (Ionic 6 and Angular 14): Warning: 10 rules skipped due to selector errors: :host-context([dir=rtl]) .ion-float-start -> subselects_1.subselects[name] is not a function :host-context([dir=rtl]) .ion-float-end -> subselects_1.subselects[name] is not a function :host-context([dir=rtl]) .ion-float-sm-start -> subselects_1.subselects[name] is not a function :host-context([dir=rtl]) .ion-float-sm-end -> subselects_1.subselects[name] is not a function :host-context([dir=rtl]) .ion-float-md-start -> subselects_1.subselects[name] is not a function :host-context([dir=rtl]) .ion-float-md-end -> subselects_1.subselects[name] is not a function :host-context([dir=rtl]) .ion-float-lg-start -> subselects_1.subselects[name] is not a function :host-context([dir=rtl]) .ion-float-lg-end -> subselects_1.subselects[name] is not a function :host-context([dir=rtl]) .ion-float-xl-start -> subselects_1.subselects[name] is not a function :host-context([dir=rtl]) .ion-float-xl-end -> subselects_1.subselects[name] is not a function

Fixed it by commenting out @import "~@ionic/angular/css/float-elements.css" in the global.scss. This is obviously a workaround unless you are using float classes provided by Ionic. float-elements.css is an optional css utility (mentioned by Ionic as a comment in global.scss). Therefore, I believe it is safe to comment it out.

For reference and to understand the reason behind it better please check this answer https://github.com/angular/angular-cli/issues/20906#issuecomment-846770108

Any plans to fix / remove these warnings? They clutter my Angular SSR server logs a lot!

Solved by this in angular.json “build”: { “options”: { “optimization”: { “styles”: { “inlineCritical”: false } } } }

Mike Hartington (Ionic Team) posted the following on the Ionic Forum about this warning (https://forum.ionicframework.com/t/host-context-dir-rtl-ion-float-start-subselects-1-subselects-name-is-not-a-function/227383):

This is ok to ignore. What’s happening is angular is trying to analyze the CSS needed for your first route and inline it to the index.html. If it comes across css that it can’t understand, it will just print this warning and skip it. This is typically fine as the css isn’t removed, just skipped for inlining.

Same issue: ionic serve

[ng] Warning: 10 rules skipped due to selector errors:
[ng]   :host-context([dir=rtl]) .ion-float-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-end -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-sm-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-sm-end -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-md-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-md-end -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-lg-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-lg-end -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-xl-start -> subselects_1.subselects[name] is not a function
[ng]   :host-context([dir=rtl]) .ion-float-xl-end -> subselects_1.subselects[name] is not a function

ionic info

Ionic:

   Ionic CLI                     : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.2.6
   @angular-devkit/build-angular : 14.2.2
   @angular-devkit/schematics    : 14.2.2
   @angular/cli                  : 14.2.2
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.0.1
   @capacitor/android : not installed
   @capacitor/core    : 4.0.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.0

System:

   NodeJS : v16.14.0 (/usr/bin/node)
   npm    : 8.19.1
   OS     : Linux 5.19

@fromage9747 Same issue here with Angular 13 and Ionic 6.