Angular 尝试实现微调器时出现异常

我正在按照的说明在我的应用程序中实现微调器，但显然我做错了什么

这是我的typescript模块。一切都正常工作，但是我没有看到任何微调器，即使我在ngOnInit中显示它并将其隐藏在getFacilities的回调中。我知道这些方法正在执行，因为我正在将数据显示到页面上

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NgxSpinnerService } from "ngx-spinner";
import { Portfolio} from '../models/Portfolio';
import { Facility } from '../models/Facility';
import 'rxjs/add/operator/map';


@Component({
    selector: 'app-member-component',
    templateUrl: './member.component.html'
})
export class MemberComponent {

    constructor(private http: HttpClient, private spinner: NgxSpinnerService ) { }

    public SelectedPortfolio: Portfolio = new Portfolio;
    public Portfolios: Portfolio[] = [] ;

    public SelectedFacility: Facility = new Facility;
    public Facilities: Facility[] = [];

    public UILock: boolean;

    ngOnInit() {

        // call the method on initial load of page to bind dropdown   

        this.spinner.show();
        this.UILock = true;

        this.SelectedPortfolio.name = "Select Portfolio";
        this.SelectedPortfolio.id = 0;

        this.SelectedFacility.name = "<No Portfolio Selected>";
        this.SelectedFacility.id = 0;

        this.getPortfolios();
    }

    public selectPortfolio(portfolio: Portfolio) {

        this.SelectedPortfolio = portfolio;

        this.getFacilities();
    }

    public selectFacility(facility: Facility) {

        this.SelectedFacility = facility;
    }

    private getPortfolios() {

        this.UILock = true;

        this.http.get<Portfolio[]>('https://localhost:44319/api/portfolio').subscribe((portfolios: Portfolio[]): void =>
          {
            this.Portfolios = portfolios;
            this.selectPortfolio(portfolios[0]);
          }
        );
    }

    private getFacilities() {

        this.http.get<Portfolio[]>('https://localhost:44319/api/portfolio/' + this.SelectedPortfolio.id).subscribe((facilities: Facility[]): void =>
            {
              this.Facilities = facilities;
              this.selectFacility(facilities[0]);
              this.UILock = false;
              this.spinner.hide();
            }
        );
    }
}

这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { NgxSpinnerModule } from "ngx-spinner";

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
import { AuthorizeGuard } from 'src/api-authorization/authorize.guard';
import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
import { MemberComponent } from './member/member.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        MemberComponent,
    ],
    imports: [
        BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
        HttpClientModule,
        FormsModule,
        ApiAuthorizationModule,
        NgxSpinnerModule,
        RouterModule.forRoot([
            { path: '', component: HomeComponent, pathMatch: 'full' },
            { path: 'member', component: MemberComponent, canActivate: [AuthorizeGuard] },
        ])
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

谢谢你的建议

也许我的package.json是相关的

{
  "name": "cashflow",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run Cashflow:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "8.0.0",
    "@angular/common": "8.0.0",
    "@angular/compiler": "8.0.0",
    "@angular/core": "8.0.0",
    "@angular/forms": "8.0.0",
    "@angular/platform-browser": "8.0.0",
    "@angular/platform-browser-dynamic": "8.0.0",
    "@angular/platform-server": "8.0.0",
    "@angular/router": "8.0.0",
    "@nguniversal/module-map-ngfactory-loader": "8.0.0-rc.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "jquery": "3.4.1",
    "oidc-client": "^1.9.0",
    "popper.js": "^1.14.3",
    "rxjs": "^6.4.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.6",
    "@angular/cli": "8.0.6",
    "@angular/compiler-cli": "8.0.0",
    "@angular/language-service": "8.0.0",
    "@types/jasmine": "~3.3.9",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~11.10.5",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "typescript": "3.4.5"
  },
  "optionalDependencies": {
    "node-sass": "^4.9.3",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

---

您缺少@angular/common中的commonmodule

---

从“@angular/common”导入{CommonModule}

你可以这样处理

---

问题是，我在项目中有两个node_模块文件夹。一个在ClientApp中的正确位置，这是Angular应用程序“所在”的位置，另一个在web应用程序的根位置！。显然有冲突

我现在了解到，在构建这样一个应用程序时，我实际上是在构建两个应用程序——一个在服务器上使用C语言，另一个在客户端/类型脚本上。VisualStudio提供了一个统一的编辑器环境，我们可以在其中同时处理两个应用程序，但它仍然是两个独立的应用程序。最初，在我真正知道我在做什么之前，我通过VisualStudio控制台窗口安装了Angular模块，但我没有意识到在安装任何软件包之前手动设置文件夹位置cd ClientApp是很重要的，否则它最终将位于错误的位置。以下是我为清理这件事所做的：

从项目根目录中删除了rogue package.json、package-lock.json、angular.json。 卸载了Dependencies/NPM下列出的所有Angular软件包 已从项目根目录中删除节点\u模块文件夹 在ClientApp文件夹中运行npm更新。

---

现在一切正常！我甚至不需要更改一行代码。

我在哪里添加代码？我尝试从'@angular/Common'添加import-import{Common}；-对于app.module和我的组件，但在这两个位置，我都会看到红色的波形，Intellisense告诉我Common已声明，但其值从未读取。你能提供一个代码示例吗？谢谢我明白你的建议。我已经将其添加到app.module.ts和mymodule.component.ts MemberComponent。在这两个位置，VisualStudio都会使线变暗，并告诉我它没有被使用。添加include没有任何影响-我仍然得到相同的异常。这确实是我所期望的。你看到我的密码了吗？我收到的例外情况是什么？这是我的问题。为什么代码-this.spinner.show；-哪个对你有效，对我无效？@YossiGeretz WARE是你的MemberComponent模块你能分享吗？这是我最初发布的第一个代码块。谢谢

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { NgxSpinnerModule } from "ngx-spinner";

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
import { AuthorizeGuard } from 'src/api-authorization/authorize.guard';
import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
import { MemberComponent } from './member/member.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        MemberComponent,
    ],
    imports: [
        BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
        HttpClientModule,
        FormsModule,
        ApiAuthorizationModule,
        NgxSpinnerModule,
        RouterModule.forRoot([
            { path: '', component: HomeComponent, pathMatch: 'full' },
            { path: 'member', component: MemberComponent, canActivate: [AuthorizeGuard] },
        ])
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

{
  "name": "cashflow",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run Cashflow:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "8.0.0",
    "@angular/common": "8.0.0",
    "@angular/compiler": "8.0.0",
    "@angular/core": "8.0.0",
    "@angular/forms": "8.0.0",
    "@angular/platform-browser": "8.0.0",
    "@angular/platform-browser-dynamic": "8.0.0",
    "@angular/platform-server": "8.0.0",
    "@angular/router": "8.0.0",
    "@nguniversal/module-map-ngfactory-loader": "8.0.0-rc.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "jquery": "3.4.1",
    "oidc-client": "^1.9.0",
    "popper.js": "^1.14.3",
    "rxjs": "^6.4.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.6",
    "@angular/cli": "8.0.6",
    "@angular/compiler-cli": "8.0.0",
    "@angular/language-service": "8.0.0",
    "@types/jasmine": "~3.3.9",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~11.10.5",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "typescript": "3.4.5"
  },
  "optionalDependencies": {
    "node-sass": "^4.9.3",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

 showSpinner() {
    this.spinner.show();
    setTimeout(() => {
        /** spinner ends after 5 seconds */
        this.spinner.hide();
    }, 5000);
  }