app.config ionic / router outlet / angular router

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

1. app-template

 

 

<section class="flex w-full h-screen">
  <router-outlet></router-outlet>
</section>

2. layout-template

 

 

 

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { Route } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { LayoutPage } from './layout/layout.page';
import { BrowserModule } from '@angular/platform-browser';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
  RouteReuseStrategy,
} from '@angular/router';

export const appRoutes: Route[] = [
  {
    path: '',
    title: 'Landing',
    data: {
      menu: true,
    },
    component: LayoutPage,
    children: [
      {
        path: '',
        loadComponent: () =>
          import('./pages/landing/landing.page').then((m) => m.LandingPage),
      },
    ],
  },
];

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
    importProvidersFrom(IonicModule.forRoot(), BrowserModule),
  ],
};

3. app.config.ts