Base solution for your next web application
Open Closed

Regarding console error #9247


User avatar
0
OriAssurant created

Hi ,

We are having Multi Page Application built with Asp.Net Core and Angular 8. We keep on getting this error a shown below. On an primeng grid column we have a print button which call the print.modal popup which causes this issues. The modal popup being used is similar to the ones you use being used by abp(on organization-units- add-role-modal.component.ts). Can you please guide on how to reolve this error.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'null' Error: Cannot match any routes. URL Segment: 'null' at e.noMatchError (main.d82dd10c4ffbd073ef7f.js:1) at t.selector (main.d82dd10c4ffbd073ef7f.js:1) at t.error (main.d82dd10c4ffbd073ef7f.js:1) at t._error (main.d82dd10c4ffbd073ef7f.js:1) at t.error (main.d82dd10c4ffbd073ef7f.js:1) at t._error (main.d82dd10c4ffbd073ef7f.js:1) at t.error (main.d82dd10c4ffbd073ef7f.js:1) at t._error (main.d82dd10c4ffbd073ef7f.js:1) at t.error (main.d82dd10c4ffbd073ef7f.js:1) at t._error (main.d82dd10c4ffbd073ef7f.js:1) at D (polyfills.13a319357725c84c3bd3.js:1) at D (polyfills.13a319357725c84c3bd3.js:1) at polyfills.13a319357725c84c3bd3.js:1 at t.invokeTask (polyfills.13a319357725c84c3bd3.js:1) at Object.onInvokeTask (main.d82dd10c4ffbd073ef7f.js:1) at t.invokeTask (polyfills.13a319357725c84c3bd3.js:1) at e.runTask (polyfills.13a319357725c84c3bd3.js:1) at d (polyfills.13a319357725c84c3bd3.js:1)

Thanks.


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @OriAssurant

    Could you share your related TS and HTML files ?

    Thanks,

  • User Avatar
    0
    OriAssurant created

    Here are the Print modal pop up ts and HTML files . Also attaching the TS and HTML PAge from where the Print label modal is called : -- Here is the Print Label modal TS file below

    import { Component, OnInit, ViewChild, Injector, Input } from '@angular/core';
    import { ModalDirective } from 'ngx-bootstrap';
    import { AppComponentBase } from '@shared/common/app-component-base';
    import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
    import { HttpClient } from '@angular/common/http';
    import { AppConsts } from '@shared/AppConsts';
    
    @Component({
      selector: 'printLabelModal',
      templateUrl: './printLabel-modal.component.html',
      styleUrls: ['./printLabel-modal.component.css']
    })
    export class PrintLabelModalComponent extends AppComponentBase implements OnInit {
      @Input('filename') filename: string;
      @ViewChild('createOrEditModal', { static: false }) modal: ModalDirective;
    
      safeUrl: SafeResourceUrl;
      uploadUrl: string;
      getUrl: string;
      openPdfInNewTab: boolean = false;
      pdfUrl: string;
    
      constructor(
        injector: Injector,
        private sanitizer: DomSanitizer,
        private _httpClient: HttpClient
      ) {
        super(injector);
        this.uploadUrl = AppConsts.remoteServiceBaseUrl + '/api/Orders/UploadFileToBlobStorage';
        this.getUrl = AppConsts.remoteServiceBaseUrl + '/api/Orders/GetFileFromBlobStorage/';
        let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    
        if (navigator.userAgent.match(/Android|webOS|iPhone|iPod|iPad|Blackberry/i) || isSafari) {
          this.openPdfInNewTab = true;
        }
      }
    
      ngOnInit() {
      }
    
      show(pdf: any) {
        let labelData = pdf.output('bloburl');
        this.labelURL(labelData);
        this.viewPdf();
      }
    
      labelURL(label: any) {
        setTimeout(() => {
          this.pdfUrl = label;
          this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(label);
        }, 0);
      }
    
      showPdf(pdf: string) {
        this.labelURL(pdf);
        this.viewPdf();
      }
    
      close(): void {
        this.modal.hide();
      }
    
      viewPdf() {
        setTimeout(() => {
          if (this.pdfUrl !== null && this.pdfUrl !== undefined && this.openPdfInNewTab) {
            window.open().location.href = this.pdfUrl;
          }
          else {
            this.modal.show();
          }
        }, 0);
      }
    
      uploadPdf(pdf: any, fileName: string): void {
        let blob = pdf.output('blob');
        let formData = new FormData();
    
        formData.append('pdf', blob, fileName);
        this._httpClient
          .post<any>(this.uploadUrl, formData)
          .subscribe();
      }
    
      getPdf(containerName: string, fileName: string) {
        this._httpClient
          .get(this.getUrl + containerName + '/' + fileName, { responseType: 'blob' })
          .subscribe(res => {
            let file = new Blob([res], { type: res.type });
            let url = window.URL.createObjectURL(file);
            this.labelURL(url);
            this.viewPdf();
          });
      }
    }
    

    ---- HTML FILE FOR PRINT MODAL POP UP

    <div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal" [config]="{backdrop: 'static', keyboard: false}">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="embed-responsive embed-responsive-1by1">
            <iframe class="embed-responsive-item" type="application/pdf" [src]='this.safeUrl' id="labelFrame" framemargin="0"
              class="frame" width="100%">
            </iframe>
          </div>
          <div class="text-center">
            <button type="button" class="btn btn-primary blue m-2" (click)="close()">{{l("Close")}}</button>
          </div>
        </div>
      </div>
    </div>
    

    ---- THE PRINT LABEL MODAL IS BEING CALLED FROM THIS PAGE :

    <div [@routerTransition]>
        <div class="kt-subheader kt-grid__item">
            <div class="kt-subheader__main">
                <h3 class="kt-subheader__title">
                    <span>{{l("Vouchers")}} - {{ storeDisplayName }} </span>
                </h3>
    
                  <button (click)="openReceipt(record.offerNumber)" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
            </div>
        </div>
        
        <printLabelModal #printLabelModal filename="{{fileName}}"></printLabelModal>
        <div [busyIf]="voucherIsLoading" *ngIf="voucherIsLoading"></div>
    </div>
    
    

    --- HERE 's the TS FILE FOR THAT

    import { Component, OnInit, Injector, ViewEncapsulation, ViewChild, Input, ElementRef, ChangeDetectorRef, AfterViewInit } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';
    import { Table } from 'primeng/components/table/table';
    import { Paginator } from 'primeng/components/paginator/paginator';
    import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
    import { OfferServiceProxy, GetAllVoucherViewDto } from '@shared/service-proxies/service-proxies';
    import * as _ from 'lodash';
    import { AppComponentBase } from '@shared/common/app-component-base';
    import { OrganizationUnitsComboboxService } from '@app/main/header/organization-units-combobox/organization-units-combobox.service';
    import { appModuleAnimation } from '@shared/animations/routerTransition';
    import * as moment from 'moment';
    import { formatDate } from '@angular/common';
    import { PrintLabelModalComponent } from '@app/main/shared/printLabel/printLabel-modal.component';
    import { AppConsts } from '@shared/AppConsts';
    
    @Component({
        templateUrl: './voucher.component.html',
        encapsulation: ViewEncapsulation.None,
        animations: [appModuleAnimation()]
    })
    
    export class VoucherComponent extends AppComponentBase implements OnInit {
        @ViewChild('dataTable', { static: true }) dataTable: Table;
        @ViewChild('paginator', { static: true }) paginator: Paginator;
        @ViewChild('printLabelModal', { static: true }) printLabelModal: PrintLabelModalComponent;
    
        storeDisplayName: string;
        isValid = true;
        voucherIsLoading = false;
    
        advancedFiltersAreShown = false;
        filterText = '';
        imeiFilter = '';
        voucherNumberFilter = '';
        rmaNumberFilter = '';
        commentFilter = '';
        isDeletedFilter = -1;
        maxCreationTimeFilter: moment.Moment;
        minCreationTimeFilter: moment.Moment;
        maxModificationTimeFilter: moment.Moment;
        minModificationTimeFilter: moment.Moment;
        organizationUnitDisplayNameFilter = '';
        orderStatusNameFilter = '';
        userNameFilter = '';
        orderTypeCodeFilter = '';
        trackingNumberFilter = '';
        shipmentTrackingNumberFilter = '';
        //start dynamic columns - will come from backend
    
        detailResults: any;
        returnorderId = '';
        orderNumber: string;
        fileName: string;
        shippingResults: any;
        labelImage: string;
        lithiumImage: string;
        labelType: string;
        trackingNumber: string;
        labelIsLoading: boolean;
        returnOrderRma: string;
        returnOrderDetail: any;
        organizationUnitId: number;
        userNameFeature = JSON.parse(abp.features.getValue('App.UserNameFeature'));
    
        constructor(
            injector: Injector,
            private _organizationUnitsComboboxService: OrganizationUnitsComboboxService,
            private _offerService: OfferServiceProxy,
        ) {
            super(injector);
        }
    
        nextFrame(): void {
            if (this._organizationUnitsComboboxService === undefined || this._organizationUnitsComboboxService.selectedOrganizationUnit === undefined) {
                if(AppConsts.showAbpNotifications) abp.notify.info(this.l('LoadVoucherData'));
                setTimeout(() => this.nextFrame(), 1000);
            } else {
                this.storeDisplayName = this._organizationUnitsComboboxService.selectedOrganizationUnit.displayName;
                this.organizationUnitId = this._organizationUnitsComboboxService.selectedOrganizationUnit.id;
                this.initialize();
            }
        }
    
        ngOnInit(): void {
            this.nextFrame();
            this._organizationUnitsComboboxService.events$.forEach(event => {
                this.storeDisplayName = event.displayName;
                this.organizationUnitId = event.id;
                 });
        }
    
           // initial loading of data
        initialize() {
          }
    
    
        openReceipt(offerNumber: string): void {
            this.printLabelModal.getPdf('receipts', offerNumber + '.pdf');        
        }
    }
    
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Does the error disapper when you comment out content of this.viewPdf(); ?