I appreciate it. Hopefully I will come back with a definite reason for the debugger not working as I assume it would.
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.
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>
Could I get information as to why the debugging isn't working normally, rather than just forcing it to?
Adding the debugger statement did work yes. Although, I'm still not sure why the regular debug breakpoint won't catch there.
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'));
});
}
}
);
}
}
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.
Your documentation says to use "ng build --prod":
https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Deployment-Angular-Publish-IIS#angular-application-publishing
Can I assume that is a bug in the documentation?
I have this same problem in my production Azure DevOps Pipeline that builds and deploys the Angular client solution:
https://support.aspnetzero.com/QA/Questions/8685
In my local Dev environment I can run:
yarn ng build --prod
and then just copy the contents of the Dist folder over to the IIS server and everything runs fine in production.
In my Azure DevOps Pipeline I can run the same commands in a Command task and the solution builds fine and deploys fine to the IIS server.
But, I end up missing minimized bundle files and the solution renders as shown in the previous question by @AuroraBMS.
Here's a look at some of files that are missing from production:
So, are you saying that I should replace:
ng build --prod
with
npm run publish
in my pipeline task for building the Angular solution?
I removed the web.config file from the API project and then tested debugging locally. It works fine without the web.config.
Then I used Visual Studio Publish to publish the API project to the IIS server. As expected, VS Publish created the needed web.config file on the fly and deployed it along with everything else to the IIS server.
The web.config file it generates is simple and doesn't include anything related to the environment, which is how it should be. Here is the web.config it generated:
With that web.config deployed to the IIS server, the API project runs fine and picks up the appsettings.Production.json settings that have the correct CorsOrigins settings and then the Angular client can connect.
So, this all boiled down to an environment variable that was set to "Development" in a web.config file that is not necessary in the API project.
I believe that if you will remove that web.config file from the download you generate, future customers will be able to publish to IIS and get CORS working without having to go through all this - assuming they set the system-wide ASPNETCORE_ENVIRONMENT=Production (or Staging if they are using the server for that) on the IIS server.