Is this possible? (multiple ion-router-outlet)

@rosunad wrote:

I’ve got a main router-outlet in app-component and then, another router-outlet named inside one page that is loaded inside the main router. When I tried to load, from this page, another one in the secondary router I receive and error ‘cannot match any route’. I’ve tried writing the route in the app-routing and manage.module.

I think the easiest way to explain my issue is showing all the code:

app-component.html

<ion-app>
    <ion-split-pane>
        <ion-menu contentId="primary">
            <ion-header>
                <ion-toolbar color="primary">
                    <ion-title>Menú</ion-title>
                </ion-toolbar>
            </ion-header>

            <ion-content>
                <ion-list>
                    <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
                        <app-menu-item [page]="p"></app-menu-item>
                    </ion-menu-toggle>
                </ion-list>
            </ion-content>

            <ion-footer>
                <ion-toolbar color="primary">
                    <ion-title>Salir</ion-title>
                </ion-toolbar>
            </ion-footer>
        </ion-menu>
        <ion-router-outlet id="primary" main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

manage.page.html

<app-header-manage></app-header-manage>

<ion-content>
    <ion-router-outlet name="manage"></ion-router-outlet>
</ion-content>

header-manage.component.html

<app-header [title]="title"></app-header>

<ion-toolbar>
    <div class="tabSliderHeader">
        <div class="tabSliderWrapper" toggleScroll="hideScroll">
            <div [routerLink]="['companies/list']" class="headerTabSelected">Clientes</div>
            <div class="headerTab">Proveedores</div>
            <div class="headerTab">Agentes</div>
            <div class="headerTab">Artículos</div>
            <div class="headerTab">Usuarios</div>
        </div>
    </div>
</ion-toolbar>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule', outlet: 'primary' },
    { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
    { path: 'manage', loadChildren: './pages/manage/manage.module#ManagePageModule', outlet: 'primary' },
    { path: 'tools', loadChildren: './pages/tools/tools.module#ToolsPageModule' },
    { path: 'accounting', loadChildren: './pages/accounting/accounting.module#AccountingPageModule' },
    { path: 'contracts', loadChildren: './pages/contracts/contracts.module#ContractsPageModule' }
];

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

manage.module.ts

import { HeaderManageComponent } from './../../components/header-manage/header-manage.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ManagePage } from './manage.page';
import { SharedModule } from '../../components/shared.module';

const routes: Routes = [
  {
    path: '',
    component: ManagePage
  },
  {
    path: 'manage/companies/list', loadChildren: './pages/companies/list/list.module#ListPageModule', outlet: 'manage'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    SharedModule
  ],
  declarations: [ManagePage, HeaderManageComponent]
})
export class ManagePageModule {}

Posts: 1

Participants: 1

Read full topic