bug: angular, mode property not available on ion-router-outlet #25813

mburger81 · 2022-08-24T11:31:57Z

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x
Nightly

Current Behavior

I try to set the mode property on the ion-router-outlet on my ionic/angular project. Anything is fine working on development but once I rund my production build I run into this error

Error: src/app/app.component.html:29:40 - error NG8002: Can't bind to 'mode' since it isn't a known property of 'ion-router-outlet'.
1. If 'ion-router-outlet' is an Angular component and it has 'mode' input, then verify that it is part of this module.
2. If 'ion-router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

29   <ion-router-outlet id="main-content" [mode]="mode"></ion-router-outlet>
                                          ~~~~~~~~~~~~~

  src/app/app.component.ts:13:16
    13   templateUrl: 'app.component.html',
                      ~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Expected Behavior

It seems to me its a @ionic/angular problem, because its a valid property in @ionic/core for the ion-router-outlet

Steps to Reproduce

Just do a clean starter template and try it

<ion-router-outlet [mode]="mode">
or

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.2.3
   @angular-devkit/build-angular : 14.1.3
   @angular-devkit/schematics    : 14.1.2
   @angular/cli                  : 14.1.3
   @ionic/angular-toolkit        : 7.0.0

Capacitor:

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

Utility:

   cordova-res : 0.15.4
   native-run  : 1.6.0

System:

   NodeJS : v16.15.1 (/usr/local/bin/node)
   npm    : 8.18.0
   OS     : macOS Monterey

Additional Information

No response

The text was updated successfully, but these errors were encountered:

liamdebeasi · 2022-08-24T13:19:02Z

Thanks for the issue. Can you provide a GitHub repo I can use to verify this behavior? I am unable to reproduce the issue in a blank Ionic starter app.

mburger81 · 2022-08-24T13:56:02Z

@liamdebeasi
yeah look at this https://github.com/mburger81/ionic-router-error

It's really just your sidemenu starter template trying to do the binding on ion-router-outlet for the mode property with angular binding

And don't forgett you have to run the PRODUCTION BUILD so
ionic build --prod

thx a lot

liamdebeasi · 2022-08-24T14:13:15Z

Thanks, I was missing the --prod part. Here is a dev build with a proposed fix:

npm install @ionic/angular@6.2.5-dev.11661349815.141a5c95

However, I will note that the current usage in your app likely will not work as expected. The mode feature in Ionic is not reactive. This means that once the mode has been set, through a default value or otherwise, updating the mode property will not change the appearance of the app.

Since the mode property in your app is bound using Angular, the value will be set asynchronously. This means that the default mode will likely be used before the mode value is set on the underlying ion-router-outlet. As an alternative, using mode without bindings or using the mode configuration in IonicModule.forRoot() should work.

mburger81 · 2022-08-24T14:50:34Z

@liamdebeasi
Thx for your fix, and for your support.

About what you are writing, If Im not wrong we set in our app the mode in the constructor, so the mode should be already available before components are created.
Testing it in dev and on prod seems always working as expected.

By the way, why are we doing this?
Our design team has decided to use a unique design for all platforms, so we forced the styles to MD for all platforms adding the class in the body by doing <body class="dark"> and changed the look extensively with custom look.

What we have noticed, to have the really same styles between android and ios devices we have to set also the mode to md in the IonicModule.forRoot({ mode: 'md'}). Just in this way the app looks exactly the same on both platforms.
But the problem is, we would like to use the page transitions and all the animations depending on the platform, so that one for ios on ios devices and the android for android devices. But as we have set the mode 'md' in the IonicModule now we can just workaround it setting on components like ion-router-outlet the mode dynamically.

But maybe we are missing something?

Do we really need to set the mode for MD on IonicModule to have the same look?

Thx a lot

liamdebeasi · 2022-08-24T14:56:25Z

I am not familiar with the internals of your application, so it is hard to say what is going on. Ionic defaults to using adaptive styling. This means that the mode defaults to ios on iPhones and iPads and defaults to md on Android phones and tablets. You can override the mode on a global or per-component instance.

For example, setting IonicModule.forRoot({ mode: 'md'}) sets the mode globally for every single component. If you were to set <ion-button mode="ios">Button</ion-button>, then this instance of ion-button would use ios mode and everything else, including other instances of ion-button, would use md mode.

I will also note that we are looking to introduce a feature that will make it easy to design a consistent theme across platforms. This should make theming your app significantly easier by disabling the adaptive styling. It will also make it possible to have consistent look while maintaining the platform-specific behaviors. For example, you will be able to have a consistent look while still using the iOS page transition on iOS and the MD page transition on MD.

mburger81 · 2022-08-24T15:03:04Z

I am not familiar with the internals of your application, so it is hard to say what is going on. Ionic defaults to using adaptive styling. This means that the mode defaults to ios on iPhones and iPads and defaults to md on Android phones and tablets. You can override the mode on a global or per-component instance.

For example, setting IonicModule.forRoot({ mode: 'md'}) sets the mode globally for every single component. If you were to set <ion-button mode="ios">Button</ion-button>, then this instance of ion-button would use ios mode and everything else, including other instances of ion-button, would use md mode.

This is exactly what we try to do, but we need to set the mode dynamically, because its not fixed to one, on android we still need them as MD.
But as you write, the problem is we need to set the body and the IonicModule to MD to be sure to have the exactly same style

I will also note that we are looking to introduce a feature that will make it easy to design a consistent theme across platforms. This should make theming your app significantly easier by disabling the adaptive styling. It will also make it possible to have consistent look while maintaining the platform-specific behaviors. For example, you will be able to have a consistent look while still using the iOS page transition on iOS and the MD page transition on MD.

This is exactly what we need to do, unique style but different behaviors, doing this what I've described seems to work. Is this a feature we will se in v7?
Very happy to hear this

liamdebeasi · 2022-08-24T15:08:08Z

This is exactly what we need to do, unique style but different behaviors, doing this what I've described seems to work. Is this a feature we will se in v7?
Very happy to hear this

We do not have a public timeline for this feature, but it's a feature we are actively working on. When there is a beta/preview version we will definitely be talking about it on our blog, Twitter, etc.

liamdebeasi · 2022-08-24T15:16:42Z

Thanks for the issue. This has been resolved via #25816, and a fix will be available in an upcoming release of Ionic Framework. Feel free to follow up if you have more questions.

resolves #25813

ionitron-bot · 2022-09-23T16:16:09Z

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.

ionitron-bot bot added the triage label Aug 24, 2022

liamdebeasi added the needs: reply the issue needs a response from the user label Aug 24, 2022

ionitron-bot bot removed the triage label Aug 24, 2022

ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Aug 24, 2022

liamdebeasi changed the title ~~bug: Can't bind to 'mode' since it isn't a known property of 'ion-router-outlet'~~ bug: angular, mode property not available on ion-router-outlet Aug 24, 2022

liamdebeasi added package: angular @ionic/angular package type: bug a confirmed bug report labels Aug 24, 2022

ionitron-bot bot removed the triage label Aug 24, 2022

liamdebeasi mentioned this issue Aug 24, 2022

fix(angular): router outlet has mode property #25816

Merged

13 tasks

liamdebeasi closed this as completed in #25816 Aug 24, 2022

liamdebeasi added a commit that referenced this issue Aug 24, 2022

fix(angular): router outlet has mode property (#25816)

afd0bbc

resolves #25813

This was referenced Sep 1, 2022

build(deps): bump @ionic/core from 5.6.11 to 6.2.5 numbersprotocol/capture-lite#2016

Closed

build(deps): bump @ionic/angular from 5.6.11 to 6.2.5 numbersprotocol/capture-lite#2015

Closed

ionitron-bot bot locked and limited conversation to collaborators Sep 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: angular, mode property not available on ion-router-outlet #25813

bug: angular, mode property not available on ion-router-outlet #25813

mburger81 commented Aug 24, 2022 •

edited

liamdebeasi commented Aug 24, 2022

mburger81 commented Aug 24, 2022

liamdebeasi commented Aug 24, 2022

mburger81 commented Aug 24, 2022

liamdebeasi commented Aug 24, 2022 •

edited

mburger81 commented Aug 24, 2022

liamdebeasi commented Aug 24, 2022

liamdebeasi commented Aug 24, 2022

ionitron-bot bot commented Sep 23, 2022

bug: angular, mode property not available on ion-router-outlet #25813

bug: angular, mode property not available on ion-router-outlet #25813

Comments

mburger81 commented Aug 24, 2022 • edited

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

liamdebeasi commented Aug 24, 2022

mburger81 commented Aug 24, 2022

liamdebeasi commented Aug 24, 2022

mburger81 commented Aug 24, 2022

liamdebeasi commented Aug 24, 2022 • edited

mburger81 commented Aug 24, 2022

liamdebeasi commented Aug 24, 2022

liamdebeasi commented Aug 24, 2022

ionitron-bot bot commented Sep 23, 2022

mburger81 commented Aug 24, 2022 •

edited

liamdebeasi commented Aug 24, 2022 •

edited