title: ASP.Net Core 2.1 Angular App - No errors when debugging but stuck on loading
body: <p>This is my very first post in this site.</p>
  
  <p>For the past days I've been trying to figure this one out but no luck.</p>
  
  <p>I have an aspnet core 2.1 application with angular and it works just fine on my local machine (I know this sounds very familiar). I published it and put it in the server where IIS is installed. So far, so good.</p>
  
  <p>Problem is, before hosting it with IIS I decided to debug it from the IIS server with the dotnet sdk by running nameofapp.exe on the command prompt. I get a "now listening on <a href="http://localhost:5000" rel="nofollow noreferrer">http://localhost:5000</a>" which is the default host when debugging and I don't get any errors.</p>
  
  <p>Now, when I make a request on <a href="http://localhost:5000" rel="nofollow noreferrer">http://localhost:5000</a> I only receive the "Loading" message from the index.html file.</p>
  
  <p>I have tried so many things, none have worked; I am even thinking to start the application from scratch and publish it little by little (I know, not the best thing to do). One of the solutions I found which I really thought was going to work was changing the base href on the index.html from "/" to "" but it didn't work. I changed it to "./" and to "." but nothing.</p>
  
  <p>Here are some files of the application on the angular side. Is still in its early stages though. There are only 2 components (app.component) and (nav-menu.component). The only thing the app.component does is it calls the nav-menu-component. The nav-menu component has a bunch of functions that are not really relevant, just want to show how the app is structured. I am also including the app.module.ts file and index.html.</p>
  
  <p><strong>app.component.ts:</strong></p>
  
  <pre><code>  import { Component } from '@angular/core';
  
   @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent{
        title = 'app';
  
        }
  </code></pre>
  
  <p><strong>app.component.html:</strong> </p>
  
  <pre><code>&lt;nav-menu&gt;&lt;/nav-menu&gt;
  </code></pre>
  
  <p><strong>nav-menu.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
  import { Observable } from 'rxjs';
  import { RefillService } from './refill.service';
  import { RefillModel } from './refill.model';
  import { MatTableDataSource, MatPaginator, MatSort, MatSnackBar } from "@angular/material";
  import { SelectionModel } from '@angular/cdk/collections';
  
  @Component({
    selector: 'nav-menu',
    templateUrl: './nav-menu.component.html',
    styleUrls: ['./nav-menu.component.css']
  })
  export class NavMenuComponent {
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
  
    addOrdersButtonDisabled: boolean = true;
    submitOrdersButtonDisabled: boolean = true;
    dataLoadingProgress: boolean = true;
    rowsIndex: number;
    refillOrderCount: number;
    orderRefillsIndex: number;
    rows: RefillModel[] = [];
    orderRefills: RefillModel[] = [];
    title = 'app';
    refill: RefillModel;
    dataSource;
    dataSourceOrderQueue;
    emptyDatasource = [];
    displayedColumns: string[] = ['select', 'doctorFullName', 'patientFullName', 'patientDateOfBirth', 'medicationName', 'writtenQuantity', 'refillsLeft', 'writtenDate', 'submitDate', 'lastOrderLineStatus', 'lastRefillDate', 'directions'];
    emptyDatasourceOrderQueue = [];
    displayedColumnsOrderQueue: string[] = ['delete', 'doctorFullName', 'patientFullName', 'medicationName']
    selection = new SelectionModel&lt;RefillModel&gt;(true, []);
  
    isHandset: Observable&lt;BreakpointState&gt; = this.breakpointObserver.observe(Breakpoints.Handset);
    constructor(private breakpointObserver: BreakpointObserver, private service: RefillService, public snackbar: MatSnackBar) { }
  
    ngOnInit() {
  
      this.getRefills();
    }
  
    getRefills() {
      this.service.getRefills().subscribe(data =&gt; {
        this.refill = data.json();
        this.dataSource = new MatTableDataSource(data.json());
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataLoadingProgress = false;
  
      });
  
    }
  
    initializeOrderQueueTable() {
      this.dataSourceOrderQueue = new MatTableDataSource(this.emptyDatasourceOrderQueue);
    }
    isAllSelected() {
      const numSelected = this.selection.selected.length;
      const numRows = this.dataSource.data.length;
      return numSelected === numRows;
    }
  
    /** Selects all rows if they are not all selected; otherwise clear selection. */
    masterToggle() {
      this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row =&gt; this.selection.select(row));
    }
  
    applyFilter(filterValue: string) {
      this.dataSource.filter = filterValue.trim().toLowerCase();
  
      if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
      }
    }
  
  
    getValues(row: RefillModel, selectedRow: boolean) {
  
  
      this.rowsIndex = this.rows.indexOf(row);
  
  
      if (!selectedRow) {
  
        if (this.rowsIndex === -1) {
          this.rows.push(row);
          this.orderRefills.push(row);
  
        }
  
      }
      else {
  
        if (this.rowsIndex !== -1) {
          this.rows.splice(this.rowsIndex, 1);
          this.orderRefills.splice(this.rowsIndex, 1);
        }
  
      }
  
  
    }
  
    deleteOrder(element: any) {
  
      this.orderRefillsIndex = this.orderRefills.indexOf(element);
      this.orderRefills.splice(this.orderRefillsIndex, 1);
      this.rows.splice(this.orderRefillsIndex, 1);
      this.dataSourceOrderQueue = new MatTableDataSource(this.orderRefills);
      // console.log(element); 
    }
  
    AddSelectedRefillsToQueue() {
      this.dataSourceOrderQueue = new MatTableDataSource(this.orderRefills);
      this.selection.clear();
    }
    submitSelectedRefills() {
  
  
      this.service.submitRefills(this.orderRefills).subscribe(response =&gt; console.log(response));
      this.snackbar.open('Refill Order(s) Submitted', '', {
        duration: 3000
      });
  
    }
  }
  </code></pre>
  
  <p><strong>nav-menu.component.html</strong></p>
  
  <pre><code>&lt;mat-sidenav-container class="sidenav-container"&gt;
    &lt;mat-sidenav
      #drawer
      class="sidenav"
      fixedInViewport="true"
      [attr.role]="isHandset ? 'dialog' : 'navigation'"
      [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
      [opened]="!(isHandset | async)!.matches"&gt;
      &lt;mat-toolbar color="primary"&gt;Pharmacy Refills&lt;/mat-toolbar&gt;
      &lt;mat-nav-list&gt;
        &lt;!-- &lt;a mat-list-item routerLinkActive="active" href=""&gt;Active Refills&lt;/a&gt;  --&gt;
        &lt;a mat-list-item routerLinkActive="active" href="#"&gt;Inactive Refills&lt;/a&gt;
        &lt;a mat-list-item routerLinkActive="active" href="#"&gt;Orders Submitted&lt;/a&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;mat-toolbar color="primary"&gt;
        &lt;button
          type="button"
          aria-label="Toggle sidenav"
          mat-icon-button
          (click)="drawer.toggle()"
          *ngIf="(isHandset | async)!.matches"&gt;
          &lt;mat-icon aria-label="Side nav toggle icon"&gt;menu&lt;/mat-icon&gt;
        &lt;/button&gt;
        &lt;span&gt;Active Refills&lt;/span&gt;
      &lt;/mat-toolbar&gt;
  
      &lt;mat-card&gt;  
        &lt;mat-card-content&gt;
      &lt;mat-form-field&gt;
          &lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"&gt;
        &lt;/mat-form-field&gt;
  
  
      &lt;table mat-table [dataSource]="dataSource"&gt;
  
  
       &lt;!-- Checkbox Column --&gt;
    &lt;ng-container matColumnDef="select"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;
          Select
        &lt;/th&gt;
        &lt;td  mat-cell *matCellDef="let row"&gt;
          &lt;mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)"
                        (click)="getValues(row,selection.isSelected(row))"
  
                      &gt;
          &lt;/mat-checkbox&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
         &lt;ng-container matColumnDef="doctorFullName"&gt;
            &lt;th mat-header-cell  *matHeaderCellDef&gt; Prescriber &lt;/th&gt;
            &lt;td mat-cell  *matCellDef="let element"&gt; {{element.doctorFullName}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="patientFullName"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Patient &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.patientFullName}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="patientDateOfBirth"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Patient DOB &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.patientDateOfBirth | date:'shortDate'}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="medicationName"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Medication &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.medicationName}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="writtenQuantity"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Quantity &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.writtenQuantity}} &lt;/td&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="refillsLeft"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Refills Remaining &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.refillsLeft}} &lt;/td&gt;
              &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="writtenDate"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Start Date &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.writtenDate | date:'shortDate' }} &lt;/td&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="submitDate"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Last Order Date &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.submitDate | date:'shortDate' }} &lt;/td&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="lastOrderLineStatus"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Last Order Status &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.lastOrderLineStatus}} &lt;/td&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="lastRefillDate"&gt;
                  &lt;th mat-header-cell *matHeaderCellDef&gt; Last Refill Date &lt;/th&gt;
                  &lt;td mat-cell *matCellDef="let element"&gt; {{element.lastRefillDate | date:'shortDate' }} &lt;/td&gt;
                &lt;/ng-container&gt;
  
                &lt;ng-container matColumnDef="directions"&gt;
                    &lt;th mat-header-cell *matHeaderCellDef&gt; Directions &lt;/th&gt;
                    &lt;td mat-cell *matCellDef="let element"&gt; {{element.directions }} &lt;/td&gt;
                  &lt;/ng-container&gt;
  
  
          &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"
        (click)="selection.toggle(row)"&gt;&lt;/tr&gt;
  
  
        &lt;/table&gt;
  
        &lt;div *ngIf="dataLoadingProgress"&gt;
            &lt;mat-progress-bar mode="query"&gt;
            &lt;/mat-progress-bar&gt;
          &lt;/div&gt;
  
  
  
      &lt;/mat-card-content&gt;
      &lt;mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
        &lt;button mat-raised-button color="primary" (click)="AddSelectedRefillsToQueue()"&gt;Add Refill Orders to Queue&lt;/button&gt;
  
      &lt;/mat-card&gt;
  
      &lt;mat-card&gt;
          &lt;mat-card-header&gt;
            &lt;h3&gt;Refill Order Queue&lt;/h3&gt;
            &lt;/mat-card-header&gt;
            &lt;mat-card-content&gt;
        &lt;table mat-table [dataSource]="dataSourceOrderQueue"&gt;
  
            &lt;ng-container matColumnDef="delete"&gt;
                &lt;th mat-header-cell  *matHeaderCellDef&gt; &lt;/th&gt;
                &lt;td mat-cell  *matCellDef="let element"&gt;
                &lt;button
                type="button" 
                mat-icon-button
                (click)="deleteOrder(element)"&gt;&lt;mat-icon&gt;delete&lt;/mat-icon&gt;
            &lt;/button&gt;
          &lt;/td&gt; 
              &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="doctorFullName"&gt;
             &lt;th mat-header-cell  *matHeaderCellDef&gt; Prescriber &lt;/th&gt;
             &lt;td mat-cell  *matCellDef="let element"&gt; {{element.doctorFullName}} &lt;/td&gt;
           &lt;/ng-container&gt;
  
       &lt;ng-container matColumnDef="patientFullName"&gt;
           &lt;th mat-header-cell *matHeaderCellDef&gt; Patient &lt;/th&gt;
           &lt;td mat-cell *matCellDef="let element"&gt; {{element.patientFullName}} &lt;/td&gt;
         &lt;/ng-container&gt;
         &lt;ng-container matColumnDef="medicationName"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Medication &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.medicationName}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
         &lt;tr mat-header-row *matHeaderRowDef="displayedColumnsOrderQueue"&gt;&lt;/tr&gt;
         &lt;tr mat-row *matRowDef="let row; columns: displayedColumnsOrderQueue;"
        &gt;&lt;/tr&gt;
  
          &lt;/table&gt;
  
        &lt;/mat-card-content&gt;
          &lt;button mat-raised-button color="primary" (click)="submitSelectedRefills()"&gt;Submit Refill Orders&lt;/button&gt;
  
  
        &lt;/mat-card&gt;
    &lt;/mat-sidenav-content&gt;
    &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule, HttpClient } from '@angular/common/http';
  import { HttpModule } from '@angular/http';
  import { RouterModule } from '@angular/router';
  import { AppComponent } from './app.component';
  import { LayoutModule } from '@angular/cdk/layout';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { MatCardModule,MatSnackBarModule,MatProgressBarModule,MatInputModule,MatSelectModule,MatProgressSpinnerModule,MatToolbarModule,MatFormFieldModule,MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatSortModule, MatTableModule } from '@angular/material';
  import { NavMenuComponent } from './nav-menu.component';
  import {FlexLayoutModule} from '@angular/flex-layout';
  import {RefillService} from './refill.service';
  import {MatCheckboxModule} from '@angular/material/checkbox';
  import {MatPaginatorModule} from '@angular/material/paginator';
  
  
  
  
  @NgModule({
    declarations: [
      AppComponent,
      NavMenuComponent
    ],
    imports: [
      BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
      HttpClientModule,
      MatCheckboxModule,
      MatProgressBarModule,
      MatSnackBarModule,
      BrowserAnimationsModule,
      MatCardModule,
      FormsModule,
      FlexLayoutModule,
      HttpModule,
      MatSortModule,
      MatPaginatorModule,
      MatProgressSpinnerModule,
      MatToolbarModule,
      MatFormFieldModule,
      MatSelectModule,
      MatButtonModule,
      MatSidenavModule,
      MatIconModule,
      MatListModule,
      LayoutModule,
      MatSortModule,
      MatInputModule,
      MatTableModule,
      RouterModule.forRoot([
        { path: '', redirectTo: '/activerefills', pathMatch: 'full' },
        { path: 'activerefills', component:NavMenuComponent},
  
      ])
    ],
    providers: [RefillService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;PharmacyRefills&lt;/title&gt;
    &lt;base href=""&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;Loading...&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Maybe you guys are able to see something I don't see. Thank you!</p>