Microsoft.AspNetCore.SpaServices由于节点模块map.d.ts而失败

Question

Angular v6.1.10 | ASP.Net Core v2.2.102

---

I am building bootstrap forms with populating drop-down lists on an ASP.NET Core and Angular app and when I tried to run dotnet run it failed:

fail: Microsoft.AspNetCore.SpaServices[0]

With the following error:

ERROR in node_modules/rxjs-compat/add/operator/map.d.ts(4,9): error TS2717: Subsequent property declarations must have the same type. Property 'map' must be of type 'any', but here has type '(this: Observable, project: (value: T, index: number) => R, thisArg?: any) => Observable...'.

Any guidance in the process is appreciated.

---

package.json

{
  "name": "fish",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run fish:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.1.10",
    "@angular/common": "6.1.10",
    "@angular/compiler": "6.1.10",
    "@angular/core": "6.1.10",
    "@angular/forms": "6.1.10",
    "@angular/http": "6.1.10",
    "@angular/platform-browser": "6.1.10",
    "@angular/platform-browser-dynamic": "6.1.10",
    "@angular/platform-server": "6.1.10",
    "@angular/router": "6.1.10",
    "@nguniversal/module-map-ngfactory-loader": "6.0.0",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "jquery": "3.3.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.3.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^7.2.2",
    "@angular/compiler-cli": "6.1.10",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "typescript": "~2.7.2"
  },
  "optionalDependencies": {
    "node-sass": "^4.9.3",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

map.d.ts

import { map } from '../../operator/map';
declare module 'rxjs/internal/Observable' {
    interface Observable<T> {
        map: typeof map;
    }
}

porto.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PortoService {

  constructor(private http: HttpClient) { }

  getPortos(): Observable<any[]> {
    return this.http.get<any[]>('/api/portos')
  }
}

fish-form.component.ts

import { PortoService } from './../services/porto.service';
import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-fish-form',
  templateUrl: './fish-form.component.html',
  styleUrls: ['./fish-form.component.css']
})
export class FishFormComponent implements OnInit {
  portos;
  fish = {};

  constructor(private PortoService: PortoService) { }

  ngOnInit() {
    this.PortoService.getPortos().subscribe(portos => {
      this.portos = portos;
      console.log("PORTOS", this.portos);
    });
  }

  onPortoChange() {
    console.log("VEHICLE", this.fish);

  }

}

Answer 1

Solved by importing the Observable import { Observable } from 'rxjs/Observable'; and changed the getPortos in porto.service.ts to

getPortos(): Observable<any[]> {
    return this.HttpClient.get<any[]>('/api/portos')
}