Hello everyone,
I have a problem with routing in my app. I tought that in Ionic on every route change, components are not being rerendered and ngOnInit is only called once. I was suprised that my components are initializing every time on route change…
that’s my package.json
{
"name": "carin",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://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": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@capacitor/android": "^2.1.0",
"@capacitor/core": "2.1.0",
"@ionic-native/app-launcher": "^5.25.0",
"@ionic-native/core": "^5.0.0",
"@ionic-native/file": "^5.23.0",
"@ionic-native/google-maps": "^5.5.0",
"@ionic-native/in-app-browser": "^5.25.0",
"@ionic-native/media": "^5.25.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0",
"cordova-android": "^8.1.0",
"cordova-browser": "6.0.0",
"cordova-plugin-app-launcher": "^0.4.0",
"cordova-plugin-applist2": "^1.0.2-dev",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-filepath": "^1.5.8",
"cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
"cordova-plugin-inappbrowser": "^3.2.0",
"cordova-plugin-media": "^5.0.3",
"core-js": "^2.5.4",
"howler": "^2.1.3",
"ng-circle-progress": "^1.5.1",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"wavesurfer.js": "^3.3.3",
"zone.js": "~0.9.1"
},
"resolutions": {
"@babel/preset-env": "^7.8.7"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.20",
"@angular/cli": "~8.3.23",
"@angular/compiler": "~8.2.14",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@capacitor/cli": "2.1.0",
"@ionic/angular-toolkit": "^2.1.1",
"@ionic/lab": "3.1.2",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"npm-force-resolutions": "0.0.3",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-googlemaps": {},
"cordova-plugin-file": {},
"cordova-plugin-filepath": {},
"cordova-plugin-applist2": {},
"cordova-plugin-app-launcher": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-media": {}
},
"platforms": [
"browser",
"android"
]
}
}
routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
{ path: 'media', loadChildren: () => import('./media/media.module').then( m => m.MediaModule)},
{ path: 'apps', loadChildren: () => import('./apps/apps.module').then( m => m.AppsModule)},
{
path: 'test',
loadChildren: () => import('./test/test.module').then( m => m.TestPageModule)
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
and for example AppsRoutingModule:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppsPage } from './apps.page';
const routes: Routes = [
{
path: '',
component: AppsPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AppsRoutingModule { }
I have noticed that when eg. /home page is the first loaded page and then i switched to /apps and switched back to /home, the home is not initializing multiple times, but when i switch back again to /apps, apps are initializing again.
In AppModule I have provider Routes strategy like that:
providers: [
StatusBar,
SplashScreen,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
],
Does anyone have an idea what’s going wrong?