Base solution for your next web application
Open Closed

VS/VS Code Debug Breakpoint Issue with RAD Tool generated code. #9117


User avatar
0
dev1_premierpoint created

Project is an angular/core solution.

I was trying to determine what information some variables were holding during certain method calls, but I could only get the method to hit my VS Code breakpoint when the application starts up, and when I load the page that the Rad tool made for my entity.

I started checking the createUser method in the users.component.ts file since it is rather similar to the method I am trying to check (the create method for a rad tool created entity). The createUser method debugs perfectly. It breaks when the page loads, and it breaks when you hit the create user button. The similar method create with the rad tool however, only hits the breakpoint when the page loads.


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

    Hi @dev1_premierpoint

    1. Is this an Angular page ?
    2. If so, could you share the generated TypeScript code and where do you expect a breakpoint ?

    Thanks,

  • User Avatar
    0
    dev1_premierpoint created

    The page is Angular.

    I'm expecting a break at the createOdeCred method, so that I can follow the path down the show method within. It is my assumption that the generated createOdeCred method works similarly to the createUser method in that it is called when the create new user (or in the case new odeCred) button is pressed.

    import { Component, Injector, ViewEncapsulation, ViewChild } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    import { OdeCredsServiceProxy, OdeCredDto  } from '@shared/service-proxies/service-proxies';
    import { NotifyService } from 'abp-ng2-module';
    import { AppComponentBase } from '@shared/common/app-component-base';
    import { TokenAuthServiceProxy } from '@shared/service-proxies/service-proxies';
    import { CreateOrEditOdeCredModalComponent } from './create-or-edit-odeCred-modal.component';
    import { ViewOdeCredModalComponent } from './view-odeCred-modal.component';
    import { appModuleAnimation } from '@shared/animations/routerTransition';
    import { Table } from 'primeng/table';
    import { Paginator } from 'primeng/paginator';
    import { LazyLoadEvent } from 'primeng/public_api';
    import { FileDownloadService } from '@shared/utils/file-download.service';
    import * as _ from 'lodash';
    import * as moment from 'moment';
    
    @Component({
        templateUrl: './odeCreds.component.html',
        encapsulation: ViewEncapsulation.None,
        animations: [appModuleAnimation()]
    })
    export class OdeCredsComponent extends AppComponentBase {
    
        @ViewChild('createOrEditOdeCredModal', { static: true }) createOrEditOdeCredModal: CreateOrEditOdeCredModalComponent;
        @ViewChild('viewOdeCredModalComponent', { static: true }) viewOdeCredModal: ViewOdeCredModalComponent;
        @ViewChild('dataTable', { static: true }) dataTable: Table;
        @ViewChild('paginator', { static: true }) paginator: Paginator;
    
        advancedFiltersAreShown = false;
        filterText = '';
    
    
    
    
        constructor(
            injector: Injector,
            private _odeCredsServiceProxy: OdeCredsServiceProxy,
            private _notifyService: NotifyService,
            private _tokenAuth: TokenAuthServiceProxy,
            private _activatedRoute: ActivatedRoute,
            private _fileDownloadService: FileDownloadService
        ) {
            super(injector);
        }
    
        getOdeCreds(event?: LazyLoadEvent) {
            if (this.primengTableHelper.shouldResetPaging(event)) {
                this.paginator.changePage(0);
                return;
            }
    
            this.primengTableHelper.showLoadingIndicator();
    
            this._odeCredsServiceProxy.getAll(
                this.filterText,
                this.primengTableHelper.getSorting(this.dataTable),
                this.primengTableHelper.getSkipCount(this.paginator, event),
                this.primengTableHelper.getMaxResultCount(this.paginator, event)
            ).subscribe(result => {
                this.primengTableHelper.totalRecordsCount = result.totalCount;
                this.primengTableHelper.records = result.items;
                this.primengTableHelper.hideLoadingIndicator();
            });
        }
    
        reloadPage(): void {
            this.paginator.changePage(this.paginator.getPage());
        }
    
        // ###### expecting break here ######
        createOdeCred(): void {
            this.createOrEditOdeCredModal.show();
        }
    
        deleteOdeCred(odeCred: OdeCredDto): void {
            this.message.confirm(
                '',
                this.l('AreYouSure'),
                (isConfirmed) => {
                    if (isConfirmed) {
                        this._odeCredsServiceProxy.delete(odeCred.id)
                            .subscribe(() => {
                                this.reloadPage();
                                this.notify.success(this.l('SuccessfullyDeleted'));
                            });
                    }
                }
            );
        }
    }
    
    
  • User Avatar
    0
    musa.demir created

    Is that debugger work? (check it in your chrome console)

    createOdeCred(): void {
    +        debugger;
            this.createOrEditOdeCredModal.show();
    }
    
  • User Avatar
    0
    dev1_premierpoint created

    Adding the debugger statement did work yes. Although, I'm still not sure why the regular debug breakpoint won't catch there.

  • User Avatar
    0
    dev1_premierpoint created

    Could I get information as to why the debugging isn't working normally, rather than just forcing it to?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @dev1_premierpoint,

    Could you also share how createOdeCred is called from your html code ?

  • User Avatar
    0
    dev1_premierpoint created

    This is a very basic page created by the rad tool. The call is made from the create button.

    <div [@routerTransition]>
      <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
        <div class="kt-subheader kt-grid__item">
          <div [class]="containerClass">
            <div class="kt-subheader__main">
                <h3 class="kt-subheader__title">
                    <span>{{l("OdeCreds")}}</span>
                </h3>
                <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                <span class="kt-subheader__desc">
                    {{l("OdeCredsHeaderInfo")}}
                </span>
            </div>
            <div class="kt-subheader__toolbar">
                <div class="kt-subheader__wrapper">
                
                
                ##### The method is called on this button press #####
    				<button *ngIf="isGranted('Pages.OdeCreds.Create')" (click)="createOdeCred()" 
    			class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewOdeCred")}}</button>
                
                
                
                </div>
            </div>
          </div>
        </div>
        <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
            <div class="kt-portlet kt-portlet--mobile">
                <div class="kt-portlet__body">
                    <form class="kt-form" autocomplete="off">
                        <div>
                            <div class="row align-items-center">
                                <div class="col-xl-12">
                                    <div class="form-group m-form__group align-items-center">
                                        <div class="input-group">
                                            <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input" [placeholder]="l('SearchWithThreeDot')" type="text">
                                            <span class="input-group-btn">
                                                <button (click)="getOdeCreds()" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
    						 <div class="row" [hidden]="!advancedFiltersAreShown">
    						 	<div class="col-md-12">
    						         <div class="kt-separator kt-separator--border-dashed"></div>
    						     </div>
    
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @dev1_premierpoint

    It all seems fine. It might be related to your editor configuration. Did you tried this on another dev machine ?

  • User Avatar
    0
    dev1_premierpoint created

    We are running this project locally for once to help with load times, so no we haven't tried it on another machine. I'll look into what could be wrong with my editor. Thank you.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @dev1_premierpoint,

    I will leave this issue open and wait for your feedback.

    Thanks,

  • User Avatar
    0
    dev1_premierpoint created

    I appreciate it. Hopefully I will come back with a definite reason for the debugger not working as I assume it would.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks @dev1_premierpoint :)