Sp-dev-docs: 'HttpClientResponse' incorrectly implements interface 'Body'

[M0rwhsky]

Category

• [X] Question
• [ ] Typo
• [X] Bug
• [ ] Additional article idea

Observed Behavior

ERROR in node_modules/@microsoft/sp-http/dist/index-internal.d.ts(423,22): error TS2420: Class 'HttpClientResponse' incorrectly implements interface 'Body'.
  Property 'body' is missing in type 'HttpClientResponse'.

node_modules/@microsoft/sp-http/dist/index-internal.d.ts(491,5): error TS2416: Property 'clone' in type 'HttpClientResponse' is not assignable to the same property in base type 'Response'.
  Type '() => HttpClientResponse' is not assignable to type '() => Response'.
    Type 'HttpClientResponse' is not assignable to type 'Response'.
      Property 'redirected' is missing in type 'HttpClientResponse'.

Steps to Reproduce

import { SPHttpClientResponse} from '@microsoft/sp-http';

"@microsoft/sp-http": "1.8.1",
"@microsoft/sp-core-library": "1.8.1",

I have seen several post about this but none with a resolution or a Confirmed fix. I am receiving this now and wondering based on some of the reading I did if it is a version dependency issue. I could not find anywhere in the documentation where sp-http was dependent on any other library versions.

Based on all the documentation and research I have done. I am doing everything correctly. So I am at a bit of a loss here and thought I would post a question here and see if anyone had suggestions.

Looking at the index-internal.d.ts files I see this which shows implementing body but yet comments excluding it:

export declare class HttpClientResponse implements Response, Body {
    protected nativeResponse: Response;
    /* Excluded from this release type: __constructor */
    /* Excluded from this release type: body */
    /** 

Again any advice suggestions would be greatly appreciated.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[patmill]

Trying to repro this. Can you tell me the rush-stack-compiler entry you have in package.json?

[M0rwhsky]

To work with this I did 2 npm install packages, sorry I didn't include that:
@Microsoft/rush-stack-compiler
@Microsoft/sp-http

"@microsoft/rush-stack-compiler": "^0.6.0",
"@microsoft/sp-http": "^1.8.1",

If there is more that I need to include I am not aware of it.

Thank You...

[patmill]

You should have something more like "@microsoft/rush-stack-compiler-2.7". Can you show your whole package.json file? Also - can you show your actual code where you are interacting with the classes? For example, this is not giving me any build errors when I am using rush-stack-compiler-2.7

    let httpClient:HttpClient = this.context.httpClient;
    let responsePromise:Promise<HttpClientResponse> = httpClient.fetch("blah", HttpClient.configurations.v1,{});
    responsePromise.then((response: HttpClientResponse) => { 
      // Do your thing
      const newResponse : HttpClientResponse = response.clone();
      console.log(newResponse.status);
    });

[M0rwhsky]

@patmill Thank you for your assistance. Talking with another developer he had me change the setting in my tsconfig to skipLibCheck and that allowed me to get past the "Body" issue. Since it was just a Type check and not necessary an issue with the code. I am now receiving a different Error. I am trying to research that one at this time. It states the following:

ERROR in ./node_modules/@microsoft/sp-http/lib/oauthTokenProvider/OAuthTokenProvider.js
Module not found: Error: Can't resolve '@ms/sp-client-shared' in 'C:\Development\DistributionServices\DSDev-Internal\node_modules\@microsoft\sp-http\lib\oauthTokenProvider'
ERROR in ./node_modules/@microsoft/sp-core-library/lib/SPCoreLibraryStrings.resx.js
Module not found: Error: Can't resolve 'resx-strings' in 'C:\Development\DistributionServices\DSDev-Internal\node_modules\@microsoft\sp-core-library\lib'
ERROR in ./node_modules/@microsoft/sp-http/lib/SPHttpStrings.resx.js
Module not found: Error: Can't resolve 'resx-strings' in 'C:\Development\DistributionServices\DSDev-Internal\node_modules\@microsoft\sp-http\lib'

Here is my package file:

"dependencies": {
    "@angular/animations": "7.2.4",
    "@angular/cdk": "7.3.2",
    "@angular/common": "7.2.4",
    "@angular/compiler": "7.2.4",
    "@angular/core": "7.2.4",
    "@angular/forms": "7.2.4",
    "@angular/http": "7.2.4",
    "@angular/material": "7.3.2",
    "@angular/platform-browser": "7.2.4",
    "@angular/platform-browser-dynamic": "7.2.4",
    "@angular/router": "7.2.4",
    "@microsoft/decorators": "^1.8.2-plusbeta",
    "@microsoft/rush-stack": "^0.1.80",
    "@microsoft/rush-stack-compiler-3.1": "^0.6.0",
    "@microsoft/sp-http": "^1.8.1",
    "@types/jest": "^24.0.9",
    "@types/jquery-match-height": "^0.7.5",
    "bootstrap": "3.3.2",
    "bootstrap-tree": "1.2.0",
    "chart.js": "2.7.3",
    "classlist.js": "^1.1.20150312",
    "core-js": "2.5.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "^4.0.0-alpha.2",
    "jquery": "^3.4.1",
    "jquery-match-height": "0.7.2",
    "jquery-sparkline": "2.4.0",
    "jstree": "3.3.6",
    "moment": "^2.24.0",
    "ngx-bootstrap": "3.1.1",
    "ngx-moment": "^3.3.0",
    "ngx-order-pipe": "^2.0.2",
    "noty": "2.4.1",
    "overwrite": "^1.0.3",
    "pdfmake-client": "1.0.0",
    "primeicons": "1.0.0",
    "primeng": "7.0.5",
    "rxjs": "6.3.3",
    "sortablejs": "1.7.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular-devkit/build-ng-packagr": "0.13.1",
    "@angular-devkit/core": "7.2.4",
    "@angular/cli": "7.3.1",
    "@angular/compiler-cli": "^7.2.14",
    "@angular/language-service": "7.1.4",
    "@types/jquery": "2.0.43",
    "@types/node": "10.12.2",
    "codelyzer": "4.5.0",
    "electron-builder": "^20.40.2",
    "ts-node": "7.0.1",
    "tslint": "5.11.0",
    "typescript": "3.1.6",
    "typescript-tslint-plugin": "0.3.1"
  }

The Code that I am trying to run is as follows (I stripped some stuff out):

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

export class BaSharepointService {

  private BAURL = "blah"


  constructor(private http: HttpClient, private sphttp: SPHttpClient) { }
  // constructor(private http: HttpClient) {}


  GetListItem(itemConfigID: string): Promise<SPHttpClientResponse> {

    this.URL = this.BAURL + 'getbytitle(\'Clients\')/items?$filter=Branch_Anywhere_App_Config_ID eq \'' + itemConfigID.trim() + '\'';

    return this.sphttp.get(this.URL, SPHttpClient.configurations.v1);

  }

Thank you again for your assistance with this matter.

[patmill]

OK, you're way out on your own. It looks like maybe you took a stock angular solution and grafted SPFx into it? At any rate, you've got a pretty messed up solution / package.json. You should start with a project created with the yeoman generator (@microsoft/generator-sharepoint). I don't have a lot of experience with angular, but @andrewconnell might have some pointers. I believe the PNP generator (@pnp/generator-spfx) might have an angular option out of the box.

You're missing the build and tooling from SPFx, which makes me thing your bundling won't work, and you'll be embedding packages directly into your solution via the SPFx external dependencies, etc.

[M0rwhsky]

Thank you @patmill I appreciate the input. I was under the assumption that the sp-http package would work for what I needed. From what you are saying it doesn't sound like it will integrate in to my Angular/Typescript project. I come across the sp-http when I was doing research on angular and SharePoint and the documentation seems to support it. I will keep playing with it for a bit yet and maybe I will come up with something. If not I will fall back on straight http calls to the web services which I know work I just have to get around the authority which it sounded like sp-http would be easier at doing. Thank you again I appreciate you looking at this and providing some feedback.

[andrewconnell]

@M0rwhsky I'd recommend (in the strongest way possible) you not put SPFx & Angular in the same project. You can do it, but it's not just hard as hell to get them working together, but the developer experience _in my opinion_ stinks. If you do one project, SPFx has to be primary so you create the project with SPFx, then add in the Angular stuff. You can't use the Angular CLI.

Use two projects... build the Angular app first, then import the resulting bundle into an SPFx project.

I've got a lot more thoughts on it, but better if you just look at this: http://www.andrewconnell.com/blog/using-angular-elements-in-sharepoint-framework-projects

Boils down to very opinionated frameworks. SPFx wants you to effectively use a CLI to scaffold the project and have things in specific places. Angular is the same. Putting two very opinioned things together... well you'll need a lot of your GH username @M0rwhsky 🥃

Part 3 of the series includes a way you can download all the code.

[andrewconnell]

One more thing...

@M0rwhsky said:

From what you are saying it doesn't sound like it will integrate in to my Angular/Typescript project

You _might_ be able to make this work, but without a bunch of research to prove otherwise, I don't think that will work.

You use SPFx to get a component (web part / extension) on the page... that will load your Angular component.

It seems to me you're trying to do the inverse... or just pick & choose the SPFx pieces you want in your Angular app... and that won't work (_unless @patmill states otherwise_).

[M0rwhsky]

Thank you @andrewconnell and @patmill ... You have been a great help. I am going to go a different direction... Have a wonderful day.

[andrewconnell]

🥃 👍

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues