How to use SPHttpClient in Angular elements project?

General Information

• Usage
• Development
• Documentation
• Feature Request

What Version you are running?

• @pnp/spfx:

I created a SPFx project using Angular elements. Two projects were created like ‘HelloWorld’ (Angular elements project) and ‘HelloWorld-spfx’ (SPFx project). I want to use SPHttpClient in Angular elements project, I declared ‘import’ in .component.ts.

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

I got an error when run ‘npm run bundle’.

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

429 export declare class HttpClientResponse implements Response, Body {
                         ~~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:2326:14
    2326     readonly body: ReadableStream<Uint8Array> | null;
                      ~~~~
    'body' is declared here.
node_modules/@microsoft/sp-http/dist/index-internal.d.ts:498: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 missing the following properties from type 'Response': redirected, trailer, body

498     clone(): HttpClientResponse;

Any ideas?

[RobertWoehr]

@StfBauer

I had time to do research this weekend that I normally wouldn’t have during the work week & I believe I was trying to take the wrong approach. The following article pointed me in the right direction:

SPFX with Angular Element — CRUD operations using PnPJS

All I had to do was install @pnp/sp on the Angular Element side for the on-demand calls I was looking to execute. SPHttpClient was not the way to accomplish what I needed on the Angular Element side.

As for my 1st question, stringifying the JSON response & passing it in through the Input decorator worked just fine.

I know it’s outside the scope of this thread, but any pointers to how to use a higher version of Angular w/ @pnp/spfx template would be nice.

I hope this helps somebody else.

[RobertWoehr]

@StfBauer

I am also very interested in the best practice for passing data returned by SharePoint or Graph REST API responses from a SPFx web part or extension to an Angular Element Component using the @pnp/spfx template.

Question #1: How can the above functionality be accomplished?

I’ve accomplished this by using the browser’s Window object, but I don’t feel comfortable the Window object is the best practice.

I have thought about stringifying the response & passing it into the Angular Component’s Input decorator, but am yet to try it out.

Question #2: How can an Angular Component make a SharePoint or Graph REST API call hosted in a SPFx web part or extension as a Service on-demand as opposed to onInit() from the SPFx side & passing it down to the Angular Component? Is this even possible?

Question #3: For on-demand calls from the Angular side, is it a best practice to use Angular’s httpclient in order to obtain the access token & then make the SharePoint or Graph REST API call for on-demand queries similar to how this would be accomplished in Postman?

Comment: It would be nice to be able to architect a global project that both the SPFx & Angular sides could reference for shared service SPFx calls & response types. Basically, have the ability to take advantage of the SPFx context from both sides of the solution (SPFx & Angular) easily.

Question #4: Is a global project design approach possible as described above?