ASP.Net Core 2.1 Angular App - нет ошибок при отладке, но зависает при загрузке - PullRequest
Новая
       1

ASP.Net Core 2.1 Angular App - нет ошибок при отладке, но зависает при загрузке

0 голосов
/ 04 сентября 2018

Это мой самый первый пост на этом сайте.

В последние дни я пытался понять это, но не повезло.

У меня есть приложение aspnet core 2.1 с angular, и оно отлично работает на моей локальной машине (я знаю, это звучит очень знакомо). Я опубликовал его и положил на сервер, где установлен IIS. Пока все хорошо.

Проблема в том, что перед размещением на IIS я решил отладить его с IIS-сервера с помощью dotnet sdk, запустив nameofapp.exe в командной строке. Я получаю сообщение «сейчас слушаю http://localhost:5000"», который является хостом по умолчанию при отладке, и я не получаю никаких ошибок.

Теперь, когда я делаю запрос на http://localhost:5000, я получаю только сообщение «Загрузка» из файла index.html.

Я пробовал так много вещей, ни одна из них не сработала; Я даже думаю запустить приложение с нуля и публиковать его понемногу (я знаю, это не лучшая вещь). Одно из решений, которое я нашел и которое, я действительно думал, сработало, - это изменение базового href в index.html с "/" на "", но оно не сработало. Я изменил его на "./" и на "." но ничего.

Вот некоторые файлы приложения на угловой стороне. Все еще находится на ранних стадиях. Есть только 2 компонента (app.component) и (nav-menu.component). Единственное, что делает app.component - это вызывает компонент nav-menu. Компонент 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>

СЧА 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
    });

  }
}

нав-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>

Может быть, вы, ребята, можете увидеть то, чего я не вижу. Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...