bug: angular, mode property not available on ion-router-outlet
See original GitHub issuePrerequisites
- 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”></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:
- Created a year ago
- Comments:9 (8 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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.