spfx-angular-elements project working correctly on workbench but not working on sharepoint page

Question

I have created a spfx-angular-element demo with reference to the below link:

https://gonadn.medium.com/spfx-with-angular-element-crud-operations-using-pnpjs-5a8a18ed6e43

It is working correctly in the SharePoint workbench. Kindly refer to the below image,

When I create the package and add an app in to the SharePoint page, it is throwing the below error in the SharePoint list API call (added SitePages in API call)

GET https://xyzsharepoint.sharepoint.com/sites/devsite/SitePages/_api/web/lists/getByTitle('TestList')/items?$top=2000 404

Kindly refer to the below image:

Can anyone please assist me with the same?

Answer 1

You are facing this issue because either you missed establishing context in PnP setup or you are passing blank context to setup.

You can establishing context in PnP setup like:

public onInit(): Promise<void> {

  return super.onInit().then(_ => {

    pnp.setup({
      spfxContext: this.context
    });
    
  });
}

OR

public onInit(): Promise<void> {

  return super.onInit().then(_ => {

    sp.setup({
      spfxContext: this.context
    });
    
  });
}

Documentation: Using sp pnp js in SharePoint Framework - Establish Context

Similar Issue: 404 error when generating REST queries