Angular RouterModule Outlet Not Reaching the Child Component

Question

I'm trying to implement this in an Angular 8 template I purchased. I have all of the structure set up but I'm getting a routing error when trying to click the print button. The only difference I can see in the structure is in the example everything is at the app folder level whereas my solution has the files in a folder called /admin. Here is my routing file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AdminComponent } from './admin.component';
//import { AmericaComponent } from './america/america.component';
import { BaltimoreScheduleComponent } from './baltimore/baltimoreschedule.component';
//import { CanadianLabelComponent } from './canada/canadianlabel.component';
//import { DocumentsComponent } from './documents/documents.component';
import { InvoiceComponent } from './invoice/invoice.component';
import { LancasterScheduleComponent } from './lancaster/lancasterschedule.component';
import { PermitsComponent } from './permits/permits.component';
import { PrintLayoutComponent } from './print-layout/print-layout.component';
import { TrailScheduleComponent } from './trail/trailschedule.component';

@NgModule({
  imports: [RouterModule.forChild([
    {
      path: '',
      component: AdminComponent,
      children: [
        {
          path: '',
          outlet: 'print',
          component: PrintLayoutComponent,
          children: [
            {
              path: '/invoice/:invoiceIds', 
              component: InvoiceComponent
            }
          ]
        }
      ]
    },{
      path: '',
      children: [{
        path: 'baltimore',
        component: BaltimoreScheduleComponent
      }]
    },
    {
      path: '',
      children: [{
        path: 'lancaster',
        component: LancasterScheduleComponent
      }]
    },
    {
      path: '',
      children: [{
        path: 'permits',
        component: PermitsComponent
      }]
    },
    {
      path: '',
      children: [{
        path: 'trail',
        component: TrailScheduleComponent
      }]
    }
  ])],
  exports: [RouterModule]
})

export class AdminRoutes {}

Here is the print service:

    import { Injectable } from '@angular/core';
    import { Router } from '@angular/router';
    
    @Injectable({
      providedIn: 'root'
    })
    export class PrintService {
      isPrinting = false;
    
      constructor(private router: Router) { }
    
      printDocument(documentName: string, documentData: string[]) {
        console.log(documentName);
        console.log(documentData)
        this.isPrinting = true;
        this.router.navigate(['/',
          { outlets: {
            'print': ['print', documentName, documentData.join()]
          }}]);
      }
    
      onDataReady() {
        setTimeout(() => {
          window.print();
          this.isPrinting = false;
         

 this.router.navigate([{ outlets: { print: null }}]);
    });
  }
}

And finally the admin component. Clicking the print button works and it makes it to the print service but that's where it breaks:

import { Component } from '@angular/core';
import { PrintService } from './admin.print.service';

@Component({
  selector: 'app-root',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent {
  title = 'angular-print-service';

  constructor(public printService: PrintService) { }

  onPrintInvoice() {
    const invoiceIds = ["101", "102", "103"];
    this.printService.printDocument("invoice", invoiceIds);
  }
}

All of the other routes (permit, lancaster, etc) appear to be working just fine. Any help anyone can provide would be greatly appreciated. Thank you!!!

question from:https://stackoverflow.com/questions/65908090/angular-routermodule-outlet-not-reaching-the-child-component

Answer 1

Waitting for answers