FolderPageRoutingModule, how to us it?

Hi there,
It’s been a while I didn’t try Ionic, and now I try to understand some logic about ionic 4 + Angular.

I generated a sample with “Folder” (split-view) with the console wizard, and I’m facing a misunderstood. There is a FolderPageRoutingModule with a single Route (default to FolderPage).

Ionic generates the Folder part as a “module”

OK, why not, but now, I wonder this: instead of changing app-routing.module.ts, is there a way to use folder/folder-routing.module.ts to set routes to a component ?

What I mean is that, at this time, the generated app is very clean but it only pass the page “id” to the FolderPage. IMHO it’s a bit complicated to understand the good practice to create a new component and say “OK, for this route, in the “folder” module, I want to use this component instead”.

If “folder” is a module, the routes should be managed by the module. But…

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExampleComponent } from './example/example.component';

import { FolderPage } from './folder.page';

const routes: Routes = [
  {
    path: 'Outbox',
    component: ExampleComponent,
  },
  {
    path: '',
    component: FolderPage,
  },
];

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

This does nothing when I go to “/fodler/Outbox”.

Of course, if I do this in App routing, it works, but that’s not the right way.

Could anyone help me to understand the good practice here ? Thanks a lot

I am not sure if I fully get what you are saying.

But it seems you like to have feature/component specific route attributes defined in a router file other than app.routing etc?

isntead of having to define two routes in app.routing like this (in pseudo code):

app.routing →

/folder → FolderComponent
/folder/:mailbox → FolderComponent with route param mailbox

You like to have at least the second route defined in a folder-routing or something similar?

Without having done this before, I’d try this:

Put /folder-> FolderComponent in app-routing. I reckon the router needs to know at least what to do as part of the main routing

And then in foldermodule’s routes add the route

‘:mailbox’ → FolderComponent
(instead of /folder/:mailbox’

Maybe the router then will see :mailbox as a child route to the main component and knows it is a parameter you can eat in in the component, similar to the way you would if both routes are setup in app-router

And then achieve what you seem to like to have: manage the subroutes in a separate file.

At least, my thinking around this. I would have to test it in an app. Maybe you can try in your code?

Another way - not sure about whether it is a good one - is to import the feature routes from the feaure route files, into app routing and then concat the items into one route variable which is used in the forRoot

Hello, thanks for your answer. But I don’t think to understand what you mean.

If you create an app with “ionic” cli, using “navigation” template, there is an app with a Folder “module” inside the app.

This Folder module has got its own “router”, but whatever the route I add, it doesn’t work.

This is the “App” router:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { ExampleComponent } from './folder/example/example.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'folder/Inbox',
    pathMatch: 'full',
  },
  {
    path: 'folder/:id',
    loadChildren: () =>
      import('./folder/folder.module').then((m) => m.FolderPageModule),
  },
];

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

And this is the Folder router:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FolderPage } from './folder.page';

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

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

These routes are generated by the CLI.

So, the question is: “How to add routes inside the Folder Router” instead of the App router.

Note that this is the generated routers by the CLI right before to add some code. And, I use a lot Angular but never developed an app with a “submodule that has got it’s own router”.

The idea is to understand why Ionic generates that structure and how to use it the right way :slight_smile:

Thanks a lot :wink: