Ionic 4 Back Button (Angular)


#1

Hi,

the API-Docs for the ion-back-button say that it is smart enough to know when to show. When is that in an Angular router environment? Because I cannot get it to show.


#2

References, doc and your code? Otherwise will difficult to answer your question


#3

I’m referring to the docs here: https://beta.ionicframework.com/docs/api/back-button

I would just like to know what " It is smart enough to know […] when to show based on the navigation stack." means in an angular router context.


#4

Don’t know exactly what they meant. I was asking this because you say “Because I cannot get it to show.” because I could confirm I’m able to show back button in my app in v4


#5

Could you show me what you did? Because I’m pretty sure I’m not implementing my sub-page correctly.

I added a page with ‘ng generate page name’. I currently have it in the AppRoutingModule like so

// master
{
    path: 'agenda',
    loadChildren: './agenda/agenda.module#AgendaPageModule'
  },
// sub
  {
    path: 'agenda/:id',
    loadChildren: './agenda-detail/agenda-detail.module#AgendaDetailPageModule'
  },

When I tried to add it to the AgendaPageModules routes, it showed the AgendaDetailPage when routing to ‘/agenda’ and the AgendaPage when routing to ‘/agenda/:id’. I could not figure out why (I had removed ‘/agenda/:id’ from AppRoutingModule).
This is what the AgendaPageModule lokked like then (did not touch AgendaDetailPageModule):

const routes: Routes = [
  {
    path: '',
    component: AgendaPage,
    children: [
      {
        path: ':id',
        component: AgendaDetailPage
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ComponentsModule,
    AgendaDetailPageModule
  ],
  declarations: [
    AgendaPage,
    AgendaTabComponent
  ],
  providers: [AgendaService]
})
export class AgendaPageModule { }

#6

Don’t

Route are lazy loaded, you don’t have to add the module of your detail (sub-page) in your (main) page

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ComponentsModule,
    AgendaDetailPageModule // <---remove
  ],
  declarations: [
    AgendaPage,
    AgendaTabComponent
  ],
  providers: [AgendaService]
})

#7

That gives me the following error:

Error: Uncaught (in promise): Error: Component AgendaDetailPage is not part of any NgModule or the module has not been imported into your module.


#8

How does your AgendaDetailPageModule looks like?


#9

Mostly as it was generated (I only added the ComponentsModule and AgendaService):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { AgendaDetailPage } from './agenda-detail.page';
import { AgendaService } from './../services/agenda.service';
import { ComponentsModule } from './../components/components.module';

const routes: Routes = [
  {
    path: '',
    component: AgendaDetailPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ComponentsModule
  ],
  declarations: [AgendaDetailPage],
  providers: [AgendaService]
})
export class AgendaDetailPageModule {}

#10

That looks ok…

Where are your pages “Physically” located? under src/pages/....? if so in app-routing.module.ts you should add pages like

 loadChildren: './pages/agenda/agenda.module#AgendaPageModule'

Side note: I see that you declare providers: [AgendaService] in each module. Not sure but I think that doing so you gonna have two different instances of your provider in each module (!= singleton)…just in case


#11

Folder Structur:

-src
--app
---agenda
---agenda-detail

AppRoutingModule (deleted some other pages that are not relevant here):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  {
    path: 'agenda',
    loadChildren: './agenda/agenda.module#AgendaPageModule'
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

AppModule (deleted some services that are not relevant here)

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

registerLocaleData(localeDe);

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      mode: 'md'
    }),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: LOCALE_ID, useValue: 'de-DE' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

full AgendaPageModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { AgendaPage } from './agenda.page';
import { AgendaDetailPage } from './../agenda-detail/agenda-detail.page';
import { AgendaDetailPageModule } from './../agenda-detail/agenda-detail.module';
import { AgendaTabComponent } from './agenda-tab/agenda-tab.component';
import { AgendaService } from './../services/agenda.service';
import { ComponentsModule } from './../components/components.module';

const routes: Routes = [
  {
    path: '',
    component: AgendaPage,
    children: [
      {
        path: ':id',
        component: AgendaDetailPage
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ComponentsModule,
    AgendaDetailPageModule
  ],
  declarations: [
    AgendaPage,
    AgendaTabComponent
  ],
  providers: [AgendaService]
})
export class AgendaPageModule { }

AgendaDetailPageModule as above.

Like I said, in this configuration, the app loads without error message BUT I get the AgendaPage for ‘/agenda/:id’ and the AgendaDetailPage for ‘/agenda’ (obviously missing the parameter) … very strange.

When I remove the children from the AgendaPageModule routes (and the AgendaDetailPageModule import) and add it to the AppRoutingModule (as above), the routing works but the back button won’t show up because (I’m guessing) then AgendaDetailPage is not a child of AgendaPage.


#12
$ ionic info

Ionic:

   ionic (Ionic CLI)          : 4.0.5 (C:\Users\JWA\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 6.3.0

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 5.10.0
   OS                : Windows 10

Environment:

   ANDROID_HOME : C:\Users\JWA\AppData\Local\Android\Sdk

#13

Why don’t you declare your detail page in app-routing.module?

Now that we removed the detail module from the page module I think we should reinject it in routing

Sorry for the back and forth, your app is open source? I could give a try?


#14

I get the same result when I leave it in the AppRoutingModule (Error when I remove the AgendaDetailPageModule import from AgendaPageModule and faulty routing when I leave the import in).

Unfortunately the app is not open source and not in any openly accessible repository either (and I can’t put it in one).

Thank you for your help so far, this has me stumped…


#15

Mmmh I’ve to say I’m a bit out of idea, difficult to point out the problem without having the all picture sorry


#16

I understand. Thank you for trying and have a nice weekend!


#17

You too

Just to summarize my idea which seems to work here: One page (main or detail) = one module = one declaration in the routing for the navigation


#18

Can you give this a try. I had faced the same issue and had to add “href” attribute to redirect to home component for back button functionality

 <ion-buttons slot="start">
      <ion-back-button  defaultHref="home"></ion-back-button>
    </ion-buttons>

NavController doesn't work in Ionic 4
NavController doesn't work in Ionic 4
#19

When I set the defaultHref attribute the button shows up. Thanks!


#20

welcome :slight_smile: