Pnpjs: Unable to use SPFetchClient from Angular 8 app

[gianespo]

I'm trying to use the SPFetchClient to query data on a SharePoint Server 2016 from an Angular 8 app. I followed the steps described in the PnP JS documentation: https://pnp.github.io/pnpjs/nodejs/docs/sp-fetch-client/ but when I run ng build or npm start I get the following error:

ERROR in ../../node_modules/adal-node/lib/adal.d.ts:1:23 - error TS2307: Cannot find module 'http'.
1 import * as http from "http";

How I can solve this?

Category

• [ ] Enhancement
• [X] Bug
• [ ] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [1.3.5]

Please specify what version(s) of SharePoint you are targeting: [2016]

Expected / Desired Behavior / Question

The expected behavior is that I'm able to run ng build or npm start to build the code and run it. One running the code should be able to connect to the specified SharePoint site and query data as requested.

Observed Behavior

Unable to build and run the code.

Steps to Reproduce

Following the steps to reproduce the bug:

1. Create a new Angular 8 project.
2. Create a service and add the following code to it:

import { sp } from '@pnp/sp';
import { SPFetchClient } from '@pnp/nodejs';

export class SharepointService {

  constructor() { }

  public getPages() {
    sp.setup({
      sp: {
        fetchClientFactory: () => {
          return new SPFetchClient('<siteUrl>', '<cliendId>', '<clientSecret>');
        }
      }
    });
    sp.web.lists.getByTitle('Pages').rootFolder.files.get().then(files => {
      console.log(files);
    }).catch(e => {
      console.error(e);
    });
  }
}

1. Run npm start

[koltyakov]

What is the connection of Angular and backend code in Node.js?

@pnp/nodejs this is the serverside library, it can't be used in frontend application, only in Node.js.

Also, with the @pnp/nodejs you can authenticate to SPO but not to On-Prem.

Can you describe the scenario you're going to achieve? Is it dev-time experience or the app is aimed being hosted outside the scope of SharePoint page?

[patrick-rodgers]

I should add that you shouldn't expose client id and secret inside a client side application - those are intended for server side applications.

[gianespo]

The scenario I'm working on is an Angular SPA running on SharePoint. Of course in this scenario, when I run my PnP code inside SharePoint, I don't need to use the SPFetchClient because I'm able to get the current context.

The real objective is try to speed up developer experience by allowing developers to run the Angular app locally during the development without the need to deploy the app on SharePoint to test each change they do in their code.

As an alternative I'm evaluating to use mock objects but this means use conditional statements on environment name and create mock object for each data I get from SharePoint.

Any other suggestions to address this scenario?

[koltyakov]

@gianespo,

We predicted this and created API proxy.
For this scenario please take a look at https://github.com/koltyakov/sp-rest-proxy project.

[gianespo]

It looks like what I need, I will try it!
Thanks