Routing module

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)
  },
  
];

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

How to test in routing module with plugin storage like this

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { IonicStorageModule } from '@ionic/storage';

 // Or to get a key/value pair
  storage.get('age').then((val) => {
    if(val == 1) var page_rout="home";
    else var page_rout="slider";
  });
const routes: Routes = [
{
    path: '',
    redirectTo: page_rout,
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  
];

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

it’s not working for me

1 Like

Hey there, this question is really hard to follow. In order to help us, please describe the issue you are having in full, put filenames above, what commands you are trying to run, any error messages, etc.

As written we can’t help, sorry.

1 Like

First off (and this is likely to get me in trouble with the real mods like @max there) I am not a huge fan of lazy loading in Angular in general, which would include routing modules. I’m sure there are app designs that are so gargantuan that all the extra complexity and maintenance tedium is justified, but I think that’s rare enough that it doesn’t warrant having this be everybody’s go-to default routing structure.

I just put all components in a single AppModule and route directly to them using component.

That being said, what I am hearing here is actually the following question:

How do I decide what the default landing page in an app should be based off of an asynchronous data source like Ionic Storage?

What I tend to do in situations like this is to use a trampoline page. In most cases (and it sounds like yours is one of these), the app component works nicely.

class AppComponent {
  constructor(private router: Router, private storage: Storage) {
    storage.ready()
      .then(() => storage.get("age"))
      .then(age => {
        if (age === 1) {
          this.router.navigate(["/home"]);
        } else {
          this.router.navigate(["/slider"]);
        }
      }});
  }
}

Naturally, this strategy should be applicable even if you do decide to stick with lazy loading, but I also wanted to assure you that it is a defensible choice to eliminate that extra complexity, at least to start out.