question-mark
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.

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

See original GitHub issue

Prerequisites

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”></ion-router-outlet> or <ion-router-outlet mode="{{mode}}"></ion-router-outlet>

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
liamdebeasicommented, Aug 24, 2022

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/25816, and a fix will be available in an upcoming release of Ionic Framework. Feel free to follow up if you have more questions.

0reactions
ionitron-bot[bot]commented, Sep 23, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

bug: wrapped menu does not work with content property #16304
i.e. move the entire contents of the split pane to the menu component, including ion-router-outlet. There is a working example here... https:// ...
Read more >
Ionic 4 named ion-router-outlet content bug with lazy loaded ...
The modules are being properly lazy loaded since module ctors are being called when first navigating to each tab and there are no...
Read more >
ion-modal: Ionic Mobile App Custom Modal API Component
ion-modal is a dialog that appears on top of mobile app content, and must be dismissed before interaction resumes. Learn more about custom...
Read more >
Angular Router: Child Routes, Auxiliary Routes, Master Detail
Learn how to use the Angular Router, avoid common pitfalls, learn Child Routes, Auxiliary Routes, setup a Master Detail Routing Scenario.
Read more >
Ion Router Outlet Bug - StackBlitz
Starter project for Angular apps that exports to the Angular CLI.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found