Ionic Info
Ionic:
ionic (Ionic CLI) : 4.1.1 (C:\Users\knuterik\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.12
@angular-devkit/core : 0.7.3
@angular-devkit/schematics : 0.7.3
@angular/cli : 6.1.3
@ionic/ng-toolkit : 1.0.6
@ionic/schematics-angular : 1.0.5
System:
NodeJS : v9.3.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.0
OS : Windows 10
Describe the Bug
Navigation is stuck after navigating between two components with child routes and ion-router-outlets. This works in angular with router-outlet but not after IonicModule is imported.
Steps to Reproduce
Steps to reproduce the behavior:
Related Code
https://stackblitz.com/github/knutto/bug-ion-router-outlet
https://github.com/knutto/bug-ion-router-outlet
Expected Behavior
Navigation should still work after navigating from /first to /second
The docs states that ion-router-outlet should behave as angular's router-outlet but it does not support having multiple/nested ion-router-outlet
Update
This was supposedly fixed in f84bb76 (beta.3) and closed #14888
After this update only the first tabs/ion-router-outlet page is stuck - the second is functioning as intended.
Your Ionic Info says "@ionic/angular 4.0.0-beta.0" have you tried with the updated beta?
Yes, forgot to update it.
Ive tested it with beta.5
The test repo uses beta.3
I've updated the repo to beta.5 and provided an updated stackblitz.
Same issue here, another thing while we are on a route in child router outlet and use this.routerOutlet.pop(); to go back and then want to visit same child component 2nd time this doesn't work.
I'm encountering the same issue on beta.7.
Hope this helps!
Update:
I started with the blank starter and added a second page 'Test'. If I navigate from Home to Test, it works with a nice animation. If I navigate back from Test to Home, it works with the proper reverse animation. When I try to navigate from there to Test again, nothing happens. So in conclusion: this doesn't seem to have anything to do with tabs or nested router outlets, but seems to be a core problem. See below for my package info:
{
"name": "testionic",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~6.1.1",
"@angular/core": "~6.1.1",
"@angular/forms": "~6.1.1",
"@angular/http": "~6.1.1",
"@angular/platform-browser": "~6.1.1",
"@angular/platform-browser-dynamic": "~6.1.1",
"@angular/router": "~6.1.1",
"@ionic-native/core": "5.0.0-beta.15",
"@ionic-native/splash-screen": "5.0.0-beta.15",
"@ionic-native/status-bar": "5.0.0-beta.15",
"@ionic/angular": "4.0.0-beta.7",
"core-js": "^2.5.3",
"rxjs": "6.2.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/cli": "~6.1.1",
"@angular/compiler": "~6.1.1",
"@angular/compiler-cli": "~6.1.1",
"@angular/language-service": "~6.1.1",
"@angular-devkit/architect": "~0.7.2",
"@angular-devkit/build-angular": "~0.7.2",
"@angular-devkit/core": "~0.7.2",
"@angular-devkit/schematics": "~0.7.2",
"@ionic/ng-toolkit": "^1.0.0",
"@ionic/schematics-angular": "^1.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.9.2",
"codelyzer": "~4.4.2",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2"
},
"description": "An Ionic project"
}
These issues seem to be the same:
There are also some open issues about a nav back button bug, may also be the same.
Closing as duplicate of https://github.com/ionic-team/ionic/issues/14566
Please track that issue instead of opening new issues.
@mhartington I don't think it's a duplicate. Like I said in my comment above the problem is not with Tabs per se, and after a little more digging I find it's still a problem when I don't lazy load anything.
@jurgen-reconcept @mhartington Might it be due to relative routing as reported here: https://github.com/ionic-team/ionic/issues/15449 ?
Seems like a few things, but mostly coming down to needing to specify a name for the multiple router-outlets. other wise, there's no logic in place to say what outlet should be active.
https://github.com/mhartington/bug-ion-router-outlet
This has the fixed setup. Let me know if that solves your issues @jurgen-reconcept
@doender i can confirm that uses absolute paths fixes it for me, but it's definitely less than ideal.
@mhartington your repo seems empty
馃槃 Silly me, forgot to push. Refresh
@mhartington My demo repo doesn't use multiple outlets but still has a similar issue (not being able to navigate back after to an already visited page): https://github.com/doender/routingError
@doender your's is related to the relativeTo
config in the navigate method. Removing that works fine.
@mhartington Excuse me for hijacking this thread, but do you mean Ionic currently doesn't support relative routing?
It does, but they way your were routing here was not correct.
Could you please explain why the routing works the first time (before going back)?
@doender let's move your questions/conversation over the ionic forum as this is getting off topic.
@mhartington I've tried a lot of things, but for the life of me I can't get it to work with relative paths. In your example all paths are absolute. For me it's not about multiple outlets but just about plain old relative navigation. I made a simple example:
https://github.com/jurgen-reconcept/bug-ion-router-outlet
P.S. I realize now that this is off topic from the original issue. Still appreciate the help!
Seems like a few things, but mostly coming down to needing to specify a name for the multiple router-outlets. other wise, there's no logic in place to say what outlet should be active.
https://github.com/mhartington/bug-ion-router-outlet
This has the fixed setup. Let me know if that solves your issues @jurgen-reconcept
This works, but does not solve the issue. As stated in the first post, this code works in plain angular, but once you load in the IonicModule, it breaks the router for router outlets without names (ion-router-outlet and router-outlet).
My main concern is that some end users will see the url with (outlet:something) and think its an error - which is why I want to avoid having named outlets. This is only a problem for Web.
@manucorporat @mhartington thanks for adding to the backlog. Since the title of this issue describes a different problem than what we discussed, maybe it should be renamed?
@mhartington please also take a look at https://github.com/ionic-team/ionic/issues/15428 . It seems that the ion-router-outlet
have some bug that's causing various issues related to routing.
@mhartington @manucorporat at ng-conf Deborah Kurata explained a solution how to fix this problem without named outlets and ugly url paths. Here is the YouTube video and Github repo:
https://www.youtube.com/watch?v=LaIAHOSKHCQ
https://github.com/DeborahK/MovieHunter-routing
In the comments of this YouTube video she pointed out, that named outlets are a bad pattern at the moment, especially in combination with lazy loading. It would be great, if the Ionic team implements this solution which is nothing more than just accept multiple ion-router-outlets on multiple views without named outlets. It could also be a good idea, if you use the plain Angular router-outlet and not always your hacks around. I hope this will help, because clean navigation stack (without ugly paths) is elementary for every app and even more for end users.
Kind regards,
Thomas
Didn't create a ticket because I figure this was related to this.
I have updated to the latest in my package.json.
Issue I am having is:
const routes: Routes = [
{
path: 'groups',
component: GroupTabPage,
children: [
{
path: 'home',
outlet: 'group',
component: GroupHomePage
// loadChildren: '../group-home/group-home.module#GroupHomePageModule'
},
{
path: 'info',
outlet: 'group',
component: GroupInfoPage
// loadChildren: '../group-info/group-info.module#GroupInfoPageModule'
},
{
path: 'members',
outlet: 'group',
component: GroupMembersPage
// loadChildren: '../group-members/group-members.module#GroupMembersPageModule'
},
{
path: '',
redirectTo: '/groups/(group:home)',
pathMatch: 'full'
}
]
}
];
Attempting to lazy load will not render the view correctly. Everything is rendering right above the tabs on bottom of the screen. Ion content doesn't show. Ion header will show.
Work around is to do it like this:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Group
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-router-outlet name="group"></ion-router-outlet>
</ion-content>
<ion-tabs tabbarPlacement="bottom" color="primary" tabbarHighlight="true">
<ion-tab label="Group Home" icon="home" href="/groups/(group:home)">
</ion-tab>
<ion-tab label="Info" icon="list" href="/groups/(group:info)">
</ion-tab>
<ion-tab label="Members" icon="people" href="/groups/(group:members)">
</ion-tab>
</ion-tabs>
So this is the only way I could get this show up correctly and work with the side menu.
Also tabbarLayout top isn't working. It won't appear anywhere.
This worked for me:
<ion-content>
<ion-router-outlet></ion-router-outlet>
</ion-content>
<ion-footer text-center>
<ion-button fill="clear" routerLink="/menu">
<ion-icon name="menu" slot="icon-only"></ion-icon>
</ion-button>
<ion-button fill="clear" routerLink="/feed">
<ion-icon name="home" slot="icon-only"></ion-icon>
</ion-button>
</ion-footer>
with clean routes and ion-footer but without tabs component. The easiest way for Ionic would be, if they put just the plain routerLink directive to the tab element and remove all that outlet/href stuff from tabs.
EDITED: no it doesn't work as expected, you're right! I hope they fix this important bug as soon as they can
Do you have multiple ion-router-outlets nested without the name property set?
I've updated the repo, here's a picture of the relevant code and the relations between them:
After navigating from the first-tabs-page to the second-tabs-page and then back to the first-tabs-page again. The first-tabs-page stops working - you can no longer navigate between tab1, tab2, tab3. Navigating forward to second-tabs-page and its tabs (tab4,tab5,tab6) works as expected.
My developer console also shows:
router-outlet destroyed
when navigating from second-tabs-page to first-tabs-page
I think is the same issue #15798
This would be the easiest setup for tabs, but doesn't work:
<ion-tabs tabbarPlacement="top">
<ion-tab label="Tab1" routerLink="/tab1"></ion-tab>
<ion-tab label="Tab2" routerLink="/tab2"></ion-tab>
<ion-tab label="Tab3" routerLink="/tab3"></ion-tab>
</ion-tabs>
<ion-content>
<ion-router-outlet></ion-router-outlet>
</ion-content>
with href it also doesn't work.
If I use this code it works:
<nav>
<a routerLink="/tab1">Tab1</a>
<a routerLink="/tab2">Tab2</a>
<a routerLink="/tab3">Tab3</a>
</nav>
<ion-content>
<ion-router-outlet></ion-router-outlet>
</ion-content>
but it looks ugly and is not the Ionic way. At the end, the whole Ionic tabs component is under the hood nothing more than just the nav and a tag. It would be a dream if the above example with Ionic tabs will work as soon as possible. With this setup, even nested tabs (multiple router-outlets) would work. A feature which the whole Ionic community has been asking for over 100 years and not to forget swipe gestures...
i found a temporal hacky workaround till they fix it, since named outlets breaks lazy load, and the no-named outlets breaks with components with childs, doing a 'copy' of the directive , will make that the views can difference between 1 outlet and the other one,
i got a full lazy loaded app with 3 levels of tabs finally working without any problem.
The tabs component just use ion-toolbar and ion-buttons, to make the tabs (now im going to try,if it works with the standard ion-tabs component )
bn8-router-outlet is a copy of the ion-router-outlet directive (in my case i removed, the navCrtl and stack stuff, since im not going to use it)
navigator.html =>
<ion-content padding>
<bn8-router-outlet></bn8-router-outlet>
</ion-content>
<ion-footer>
<tabs [tabs]=mainTabs></tabs>
</ion-footer>
const routes: Routes = [{
path:'',
component: NavigatorPage,
children: [
{ path: '', redirectTo: 'eventos-handler', pathMatch: 'full' },
{ path: 'eventos-handler', loadChildren: './event-handler/event-handler.module#EventHandlerPageModule' },
{ path: 'entradas', loadChildren: './entradas/entradas.module#EntradasPageModule' },
{ path: 'chat', loadChildren: './chat/chat.module#ChatPageModule' },
{ path: 'notificaciones', loadChildren: './notificaciones/notificaciones.module#NotificacionesPageModule' },
{ path: 'perfil', loadChildren: './perfil-handler/perfil-handler.module#PerfilHandlerPageModule' },
{ path: '**', redirectTo: '', pathMatch: 'full' }
]
},
{ path: '**', redirectTo: '', pathMatch: 'full' },
]
* event-handler-routing.module.ts =>
const routes: Routes = [
{
path: '',
component: EventHandlerPage,
children: [
{
path: '',
children: [
{ path: '', redirectTo: 'eventos', pathMatch: 'full' },
{ path: 'eventos', loadChildren: './eventos/eventos.page.module#EventosPageModule' },
{ path: 'planes', loadChildren: './planes/planes.page.module#PlanesPageModule' },
{ path: 'clubs', loadChildren: './clubs/clubs.page.module#ClubsPageModule' },
{ path: 'mapa', loadChildren: './mapa/mapa.page.module#MapaPageModule' },
{ path: '**', redirectTo: 'eventos', pathMatch: 'full' }
]
}
]
},
{ path: '**', redirectTo: '', pathMatch: 'full' }
]
```
Ps. Probably just using "\
@idanzapp well it doesn't work for me. I tried to clone the directive (plus idk why it's a directive if it's used as a component) and i also imported all the stuff ('cause i needed stack etc.) but it errors with a TypeError: containerEl.commit
try to use \
@idanzapp actually I refactored my application in order to not use multiple nested ion-router-outlet and... the same problem occurs... now I don't even have anymore "router-outlet destroyed" logged in the console... this is weird as f*.
I'm going to create a well documented issue with an example video on this repo that groups all the outlet related issues too like this.
Do named router outlets as of angular 7 support lazy loading ? Or is this something that needs to be fixed by ionic ?
Yes, this works in angular. When you import the IonicModule into an angular module, this breaks...
Will be fixed by https://github.com/ionic-team/ionic/pull/16637
@manucorporat sorry to bother, but part of this issue is involved in this other issue #15959
Means that the other one is solved too?
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.
Most helpful comment
@mhartington @manucorporat at ng-conf Deborah Kurata explained a solution how to fix this problem without named outlets and ugly url paths. Here is the YouTube video and Github repo:
https://www.youtube.com/watch?v=LaIAHOSKHCQ
https://github.com/DeborahK/MovieHunter-routing
In the comments of this YouTube video she pointed out, that named outlets are a bad pattern at the moment, especially in combination with lazy loading. It would be great, if the Ionic team implements this solution which is nothing more than just accept multiple ion-router-outlets on multiple views without named outlets. It could also be a good idea, if you use the plain Angular router-outlet and not always your hacks around. I hope this will help, because clean navigation stack (without ugly paths) is elementary for every app and even more for end users.
Kind regards,
Thomas