这是我在该网站上的第一篇文章。
在过去的几天里，我一直试图弄清楚这一点，但没有运气。
我有一个带有angular的aspnet core 2.1应用程序，它在我的本地计算机上工作得很好（我知道这听起来很熟悉）。我发布了它，并将其放在安装了IIS的服务器中。到目前为止，一切都很好。
问题是，在将其托管到IIS之前，我决定通过在命令提示符下运行nameofapp.exe从带有dotnet sdk的IIS服务器中对其进行调试。我收到“ http://localhost:5000正在侦听”消息，这是调试时的默认主机，没有任何错误。
现在，当我在http://localhost:5000上发出请求时，我仅收到来自index.html文件的“正在加载”消息。
我尝试了很多事情，没有一个奏效；我什至在考虑从头启动应用程序并一点一点地发布它（我知道，这不是最好的选择）。我发现真正想到的解决方案之一就是将index.html的基本href从“ /”更改为“”，但是没有用。我将其更改为“ ./”和“。”但没有。
以下是该应用程序的一些文件，位于侧面。虽然仍处于早期阶段。只有两个组件（app.component）和（nav-menu.component）。 app.component唯一要做的就是调用nav-menu-component。 nav-menu组件具有一堆与实际无关的功能，只是想展示应用程序的结构。我还包括了app.module.ts文件和index.html。
app.component.ts：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
title = 'app';
}
app.component.html：
<nav-menu></nav-menu>
nav-menu.component.ts：
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<RefillModel>(true, []);
isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);
constructor(private breakpointObserver: BreakpointObserver, private service: RefillService, public snackbar: MatSnackBar) { }
ngOnInit() {
this.getRefills();
}
getRefills() {
this.service.getRefills().subscribe(data => {
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 => 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 => console.log(response));
this.snackbar.open('Refill Order(s) Submitted', '', {
duration: 3000
});
}
}
nav-menu.component.html
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="isHandset ? 'dialog' : 'navigation'"
[mode]="(isHandset | async)!.matches ? 'over' : 'side'"
[opened]="!(isHandset | async)!.matches">
<mat-toolbar color="primary">Pharmacy Refills</mat-toolbar>
<mat-nav-list>
<!-- <a mat-list-item routerLinkActive="active" href="">Active Refills</a> -->
<a mat-list-item routerLinkActive="active" href="#">Inactive Refills</a>
<a mat-list-item routerLinkActive="active" href="#">Orders Submitted</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="(isHandset | async)!.matches">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Active Refills</span>
</mat-toolbar>
<mat-card>
<mat-card-content>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
Select
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
(click)="getValues(row,selection.isSelected(row))"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="doctorFullName">
<th mat-header-cell *matHeaderCellDef> Prescriber </th>
<td mat-cell *matCellDef="let element"> {{element.doctorFullName}} </td>
</ng-container>
<ng-container matColumnDef="patientFullName">
<th mat-header-cell *matHeaderCellDef> Patient </th>
<td mat-cell *matCellDef="let element"> {{element.patientFullName}} </td>
</ng-container>
<ng-container matColumnDef="patientDateOfBirth">
<th mat-header-cell *matHeaderCellDef> Patient DOB </th>
<td mat-cell *matCellDef="let element"> {{element.patientDateOfBirth | date:'shortDate'}} </td>
</ng-container>
<ng-container matColumnDef="medicationName">
<th mat-header-cell *matHeaderCellDef> Medication </th>
<td mat-cell *matCellDef="let element"> {{element.medicationName}} </td>
</ng-container>
<ng-container matColumnDef="writtenQuantity">
<th mat-header-cell *matHeaderCellDef> Quantity </th>
<td mat-cell *matCellDef="let element"> {{element.writtenQuantity}} </td>
</ng-container>
<ng-container matColumnDef="refillsLeft">
<th mat-header-cell *matHeaderCellDef> Refills Remaining </th>
<td mat-cell *matCellDef="let element"> {{element.refillsLeft}} </td>
</ng-container>
<ng-container matColumnDef="writtenDate">
<th mat-header-cell *matHeaderCellDef> Start Date </th>
<td mat-cell *matCellDef="let element"> {{element.writtenDate | date:'shortDate' }} </td>
</ng-container>
<ng-container matColumnDef="submitDate">
<th mat-header-cell *matHeaderCellDef> Last Order Date </th>
<td mat-cell *matCellDef="let element"> {{element.submitDate | date:'shortDate' }} </td>
</ng-container>
<ng-container matColumnDef="lastOrderLineStatus">
<th mat-header-cell *matHeaderCellDef> Last Order Status </th>
<td mat-cell *matCellDef="let element"> {{element.lastOrderLineStatus}} </td>
</ng-container>
<ng-container matColumnDef="lastRefillDate">
<th mat-header-cell *matHeaderCellDef> Last Refill Date </th>
<td mat-cell *matCellDef="let element"> {{element.lastRefillDate | date:'shortDate' }} </td>
</ng-container>
<ng-container matColumnDef="directions">
<th mat-header-cell *matHeaderCellDef> Directions </th>
<td mat-cell *matCellDef="let element"> {{element.directions }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)"></tr>
</table>
<div *ngIf="dataLoadingProgress">
<mat-progress-bar mode="query">
</mat-progress-bar>
</div>
</mat-card-content>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
<button mat-raised-button color="primary" (click)="AddSelectedRefillsToQueue()">Add Refill Orders to Queue</button>
</mat-card>
<mat-card>
<mat-card-header>
<h3>Refill Order Queue</h3>
</mat-card-header>
<mat-card-content>
<table mat-table [dataSource]="dataSourceOrderQueue">
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let element">
<button
type="button"
mat-icon-button
(click)="deleteOrder(element)"><mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<ng-container matColumnDef="doctorFullName">
<th mat-header-cell *matHeaderCellDef> Prescriber </th>
<td mat-cell *matCellDef="let element"> {{element.doctorFullName}} </td>
</ng-container>
<ng-container matColumnDef="patientFullName">
<th mat-header-cell *matHeaderCellDef> Patient </th>
<td mat-cell *matCellDef="let element"> {{element.patientFullName}} </td>
</ng-container>
<ng-container matColumnDef="medicationName">
<th mat-header-cell *matHeaderCellDef> Medication </th>
<td mat-cell *matCellDef="let element"> {{element.medicationName}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsOrderQueue"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsOrderQueue;"
></tr>
</table>
</mat-card-content>
<button mat-raised-button color="primary" (click)="submitSelectedRefills()">Submit Refill Orders</button>
</mat-card>
</mat-sidenav-content>
</mat-sidenav-container>
app.module.ts
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 { }
index.html
<!doctype html>
<html lang="en">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<head>
<meta charset="utf-8">
<title>PharmacyRefills</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
也许你们能看到我看不到的东西。谢谢！