This service provides the on-page content (_spPageContextInfo and __REQUESTDIGEST) often used when making REST calls in JavaScript from a SharePoint page. This content is not provided on Modern pages with the SharePoint Framework, requiring updates to any REST calls that may have depended on it. This service dynamically populates the data on any…

widgetHelper.ts

// SharePoint widget helper service
// This service provides the on-page content (_spPageContextInfo and __REQUESTDIGEST) often used when making REST calls
// in JavaScript from a SharePoint page. This content is not provided on Modern pages with the SharePoint Framework, requiring
// updates to any REST calls that may have depended on it. This service dynamically populates the data on any web page using
// SharePoint Framework.

import { IWebPartContext } from '@microsoft/sp-webpart-base';
import { IDigestCache, DigestCache } from '@microsoft/sp-http';

export interface IPageContextInfo {
    currentCultureName: string,
    currentUICultureName: string,
    currentLanguage: number,
    layoutsUrl: string,
    serverRequestPath: string,
    siteAbsoluteUrl: string,
    siteServerRelativeUrl: string,
    webAbsoluteUrl: string,
    webTemplate: string, 
    webLanguage: number,
    webServerRelativeUrl: string,
    webTitle: string
    webUIVersion: number,
}

const PAGE_CONTEXT_PROPERTY = "_spPageContextInfo";
const REQUEST_DIGEST_ELEMENT = "__REQUESTDIGEST";

export class WidgetHelper {

    constructor (private wpContext: IWebPartContext) { }

    public ensureClassicPageProps(getDigest: boolean): Promise<void> {

        var result = new Promise<void>((resolve) => {

            // Fill in _spPageContextInfo if it is missing
            if (!window[PAGE_CONTEXT_PROPERTY]) {

                window[PAGE_CONTEXT_PROPERTY] = {};
                let pci: IPageContextInfo = window[PAGE_CONTEXT_PROPERTY];
                let pageContext = this.wpContext.pageContext;

                pci.currentCultureName =
                    pageContext.cultureInfo.currentCultureName;
                pci.currentLanguage =
                    this.getLocaleId(pageContext.cultureInfo.currentUICultureName);
                pci.currentUICultureName =
                    pageContext.cultureInfo.currentUICultureName;
                pci.layoutsUrl = "_layouts/15";
                pci.serverRequestPath = 
                    window.location.pathname.substring(
                        pageContext.web.serverRelativeUrl.length
                    );
                pci.siteAbsoluteUrl =
                    pageContext.site.absoluteUrl;
                pci.siteServerRelativeUrl = 
                    pageContext.site.serverRelativeUrl;
                pci.webAbsoluteUrl =
                    pageContext.web.absoluteUrl;
                pci.webLanguage = 
                    pageContext.web.language;
                pci.webServerRelativeUrl =
                    pageContext.web.serverRelativeUrl;
                pci.webTemplate =
                    pageContext.web.templateName;
                pci.webTitle =
                    pageContext.web.title;
            }

            // Fill in __REQUSTDIGEST if it is missing
            if (!getDigest) {
                resolve();
            } else {
                if (!document.getElementById(REQUEST_DIGEST_ELEMENT)) {
                    var digestCache: IDigestCache =
                        this.wpContext.serviceScope.consume(DigestCache.serviceKey);
                    digestCache.fetchDigest(this.wpContext.pageContext.web.serverRelativeUrl)
                        .then ((digest:string) => {
                        var digestElement:HTMLInputElement =
                            document.createElement("input");
                        digestElement.name = REQUEST_DIGEST_ELEMENT;
                        digestElement.id = REQUEST_DIGEST_ELEMENT;
                        digestElement.type = "hidden";
                        digestElement.value = digest;
                        document.body.appendChild(digestElement);   
                        resolve();                         
                        })
                }
            }
         });

        return result;
    }

    private getLocaleId (localeName: string) : number {
    
        var locales: {id: number, name: string}[] = [
            {id: 1025, name: 'ar-SA'},
            {id: 1026, name: 'bg-BG'},
            {id: 1027, name: 'ca-ES'},
            {id: 1028, name: 'zh-TW'},
            {id: 1029, name: 'cs-CZ'},
            {id: 1030, name: 'da-DK'},
            {id: 1031, name: 'de-DE'},
            {id: 1032, name: 'el-GR'},
            {id: 1033, name: 'en-US'},
            {id: 1035, name: 'fi-FI'},
            {id: 1036, name: 'fr-FR'},
            {id: 1037, name: 'he-IL'},
            {id: 1038, name: 'hu-HU'},
            {id: 1040, name: 'it-IT'},
            {id: 1041, name: 'ja-JP'},
            {id: 1042, name: 'ko-KR'},
            {id: 1043, name: 'nl-NL'},
            {id: 1044, name: 'nb-NO'},
            {id: 1045, name: 'pl-PL'},
            {id: 1046, name: 'pt-BR'},
            {id: 1048, name: 'ro-RO'},
            {id: 1049, name: 'ru-RU'},
            {id: 1050, name: 'hr-HR'},
            {id: 1051, name: 'sk-SK'},
            {id: 1053, name: 'sv-SE'},
            {id: 1054, name: 'th-TH'},
            {id: 1055, name: 'tr-TR'},
            {id: 1057, name: 'id-ID'},
            {id: 1058, name: 'uk-UA'},
            {id: 1060, name: 'sl-SI'},
            {id: 1061, name: 'et-EE'},
            {id: 1062, name: 'lv-LV'},
            {id: 1063, name: 'lt-LT'},
            {id: 1066, name: 'vi-VN'},
            {id: 1068, name: 'az-Latn-AZ'},
            {id: 1069, name: 'eu-ES'},
            {id: 1071, name: 'mk-MK'},
            {id: 1081, name: 'hi-IN'},
            {id: 1086, name: 'ms-MY'},
            {id: 1087, name: 'kk-KZ'},
            {id: 1106, name: 'cy-GB'},
            {id: 1110, name: 'gl-ES'},
            {id: 1164, name: 'prs-AF'},
            {id: 2052, name: 'zh-CN'},
            {id: 2070, name: 'pt-PT'},
            {id: 2074, name: 'sr-Latn-CS'},
            {id: 2108, name: 'ga-IE'},
            {id: 3082, name: 'es-ES'},
            {id: 5146, name: 'bs-Latn-BA'},
            {id: 9242, name: 'sr-Latn-RS'},
            {id: 10266, name: 'sr-Cyrl-RS'}
        ]

        var result: number = 0;
        for (var l of locales) {
            if (l.name === localeName) {
                result = l.id;
                break;
            }
        }

        return result;
    }
}

WidgetHelperUse.ts

// (within a SharePoint Framework web part)
import { WidgetHelper } from './services/widgetHelper';

// ...

  public render(): void {
    var helper = new WidgetHelper(this.context);
    helper.ensureClassicPageProps(true).then (() => {
      const element: React.ReactElement<IEventsProps > = React.createElement(
        Events,
        {
          description: this.properties.description
        }
      );

      ReactDom.render(element, this.domElement);
    });
  }

Firstly, thanks a lot for this module....

The "IWebPartContext.serviceScope" (line 77) does not exists.... How to correct this ?