Using ion-menu on subrouting module

Ionic Framework
1

Hello everyone,

I followed the Ionic 4 login tutorial from devtactics but implemented it on an existing app with a sidemenu.
As in the tutorial, the user get routed to a public or private page according to it’s login status. But now I’m having the problem that routing from within the sidemenu is not working anymore. The private folder has it’s own routing module file, and I can specify all pages in that module. The dashboard cannot be acces from the side menu.

This is how app.component.ts looks like (Its in src/app)

import { Component } from '@angular/core';

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

import { AuthenticationService } from './services/authentication.service';
import { Router } from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    // This is what's showing in hamburger menu
    public appPages = [
        {
            title: 'Dashboard',
            url: '/dashboard',
        },
    ];

    constructor(
        private platform: Platform,
        private splashScreen: SplashScreen,
        private statusBar: StatusBar,
        private authenticationService: AuthenticationService,
        private router: Router
    ) {
        this.initializeApp();
    }

    initializeApp() {
        this.platform.ready().then(() => {
            this.statusBar.styleDefault();
            this.splashScreen.hide();

            this.authenticationService.authenticationState.subscribe(state => {
                if (state) {
                    this.router.navigate(['bg', 'dashboard']);
                } else {
                    this.router.navigate(['login']);
                }
            });
        });
    }
}

As I think of it, one of the following thing could be a solution:

  1. change the ‘url’ in app.component to match the bg/dashboard route
  2. create a custom app.component inside the bg folder
  3. create a custom directive that has the routes for pages in the bg folder.

But I don’t understand how to implement any of these options. messing with any url breaks the auto forwarding in dashboard, I don’t know how to switch to a different app.component (and If that’s even possible) and the directive is not really a directive that I can change.
Any help would be appreciated!

2
3

That’s genius, I’ll look into that, thank you.