The type definition file for 'request' is nowhere to be found: ERROR encountered in node_modules/@looker/sdk-rtl/lib/oauthSession.d.ts:1:23 - TS2688 error

My current task involves integrating the Looker Embedded Client SDK with Angular. I have installed @looker/SDK and configured the settings as per the guidelines provided on the official npm page for @looker/sdk to access APIs.

However, upon attempting to access certain methods and classes, the Angular application encountered failures. The specific error message is:

ERROR in node_modules/@looker/sdk-rtl/lib/oauthSession.d.ts:1:23 - error TS2688: Cannot find type definition file for 'request'.

1 /// <reference types="request" />

Here is the configuration information:

// package.json 

{ 
   //package.json
   
 "dependencies": {
    "@angular/core": "~10.2.3",
    "@looker/sdk": "^7.20.3",
    // few other libs
  },
  "devDependencies": {
   // few other libs  
  "@angular/cli": "~10.2.0",
     "typescript": "~4.0.5"
  },
 
//tsconfig.json
"compilerOptions": {
  // few other settings
  "module": "es2020",
  "target": "es5",
   "lib": [
    "es2020",
    "dom"
  ],
 

/ /And in component file:

import { LookerNodeSDK } from '@looker/sdk/lib/node'

@Component({
  selector: 'rs-reports',
  templateUrl: './reports.component.html',
  providers: [ReportsService]
})
export class ReportsComponent implements OnInit {

  constructor() {
  }
  ngOnInit() {
    this.getLookerConfig()
      .then(response => {
        console.log(response, 'Success')
      }).catch(error => {
      console.log(error, 'Error')
    });
  }

  async getLookerConfig() {
    // create a Node SDK object for API 3.1
    const sdk = LookerNodeSDK.init31();
    // retrieve your user account to verify correct credentials
    const me = await sdk.ok(sdk.me(
      "id, first_name, last_name, display_name, email, personal_space_id, home_space_id, group_ids, role_ids"))
    console.log({me})
    // make any other calls to the Looker SDK
    const dashboards = await sdk.ok(
      sdk.search_dashboards({title: 'My SDK dashboard'})
    )
    if (dashboards.length === 0) {
      console.log('Dashboard not found')
    }


    await sdk.authSession.logout()
    if (!sdk.authSession.isAuthenticated()) {
      console.log('Logout successful')
    }
  }


Answer №1

Although I'm not very familiar with Angular, it seems like the error you're encountering may be misleading. Attempting to use the Node version of the Looker SDK (LookerNodeSDK) in an Angular application might not yield optimal results. The NodeSDK is specifically designed for backend use in Node.js environments, whereas we provide a LookerBrowserSDK intended for frontend applications.

Regrettably, this distinction is not extensively clarified in our documentation (which I aim to enhance), but I believe you'll achieve better outcomes by employing the browserSDK.

import { Looker31SDK, LookerBrowserSDK } from '@looker/sdk/lib/browser'

Despite my limited knowledge of Angular, here's some JavaScript code that should function more effectively when placed within the ngOnInit method. Both the browserSDK and nodeSDK share identical methods, ensuring compatibility with existing documentation. One essential variation is in how the SDK is initialized; you cannot utilize a settings.ini file as input. If Oauth isn't preferred, you can devise a personalized config reader for passing appropriate configurations. Take a look:

import { Looker31SDK, LookerBrowserSDK } from '@looker/sdk/lib/browser'
import { ApiSettings, IApiSettings, IApiSection } from '@looker/sdk-rtl'

/**
 * @class CustomConfigReader
 *
 * A custom configuration reader that overrides the readConfig() method
 * in NodeSettings to allow fetching client_id and client_secret
 * from anywhere.
 */
class CustomConfigReader extends ApiSettings {
  constructor(settings: IApiSettings) {
    super(settings)
  }

  /**
   * @returns an IApiSection object containing client_id and client_secret
   */
  readConfig(): IApiSection {
    return {
      client_id: 'clientId',
      client_secret: 'clientSecret',
    }
  }
}

;(async () => {
  const sdk = LookerBrowserSDK.init31(
    new CustomConfigReader({
      base_url: 'https://<your-looker-server>:19999 or https://your.cloud.looker.com',
    } as IApiSettings)
  )

  const me = await sdk.ok(
    sdk.me(
      'id, first_name, last_name, display_name, email, personal_space_id, home_space_id, group_ids, role_ids'
    )
  )
  console.log({ me })
})()

After implementing the above code snippet, ensure to define your function accordingly. As both the browserSDK and nodeSDK offer congruent functionality, everything should operate as outlined in the documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update an API call to switch from promises to observables, implementing axios

Recently, I have been experimenting with using rxjs for API requests in a React application and this is the approach that I have come up with. What are your thoughts on this method? Are there any best practices that you would recommend following? If you ...

How can I simulate or manipulate the element's scrollHeight and clientHeight in testing scenarios?

In my JavaScript code, I have a function that checks if an HTML paragraph element, 'el', is a certain size by comparing its scrollHeight and clientHeight properties: function isOverflow(element: string): boolean { const el = document.getEleme ...

Can a custom type guard be created to check if an array is empty?

There are various methods for creating a type guard to ensure that an array is not empty. An example of this can be found here, which works well when using noUncheckedIndexedAccess: type Indices<L extends number, T extends number[] = []> = T["le ...

Steps for launching Angular 5 application using Node.js server

I have developed an Angular 5 application that retrieves data from a node.js server. I successfully deployed the application to my web server hosted by FastComet, which supports node.js, but unfortunately, the server does not seem to be functioning properl ...

What is the way to utilize kafkajs' testHelpers module in my test cases?

I need guidance on how to write unit and integration tests for the code in my Typescript project that utilizes the kafkajs NPM package. The kafkajs project recommends using the testHelpers module for testing, which is referenced in its own unit tests. Howe ...

What's the best location to insert the web.config file within my project structure?

It appears that Azure is not reading the local .json files in my App due to a missing file named web.config. This file should set the MIME type for .json by default so that Azure can locate the files without throwing a 404 error. However, even after adding ...

Error encountered: ExpressionChangedAfterItHasBeenCheckedError when trying to load the loading indicator

I encountered an issue with my loading indicator that I cannot seem to resolve: LoadingIndicatorComponent.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'hidden: true&ap ...

How to determine the type of an abstract method's implementation in a concrete class using TypeScript

I possess a collection of functions mapped with various signatures const allMyFunctions = { f1: () => Promise.resolve(1), f2: (a: number) => a }; Furthermore, I have an abstract class that performs operations on these functions: abstract class ...

npm - Configuring the maximum memory usage in npm

I encountered an error message while trying to build my Angular project, The error states: "CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" I read somewhere that adjusting the max-old-space-size in npm could resolve this issue. How ...

Angular does not seem to be identifying the project name as a valid property

After installing Angular materials using the CLI, I decided to check my angular.json file and encountered an error in the console stating that "Property MEAN-APP is not allowed". [The name of my Angular project is MEAN-APP] Here's a screenshot of the ...

Methods for invoking a JavaScript function from TypeScript within an Angular2 application

Hey there! I'm looking to execute a regular JavaScript function from a TypeScript file. Let's say I have a JavaScript file called test.js and it's been imported into the index.html of my application. Now, I want to invoke the test() functi ...

Angular array presentation

Is there a way to showcase content similar to enter image description here like in this image??? const DISH = { id: '0', name: 'Uthappizza', image: '/assets/images/uthappizza.png', category: 'mains', featu ...

Function editing error

Attempting to retrieve user data for editing in the form is causing an error related to the line where the data is being assigned: **** this.user = data This is the content of edit-user.component.ts: import { Component, OnInit } from '@angular/core ...

The specified 'detail' property cannot be found on the given type '{}'. Error code: 2339

I encountered the error mentioned in the title while working on the code below. Any suggestions on how to resolve this issue? Any assistance would be greatly appreciated! import { useHistory } from "react-router-dom"; let h ...

What causes the value from the <input> form to be duplicated in all other inputs?

this is a section of my code: <input style="width:100px;" #quantity name="vehicle{{i}}_quantity" class="options-input" [(ngModel)]="detail.quantity" type="number" required [ngClass]="{ 'error-bottom-border': quantity.value.length==0}" placeho ...

Tips for resetting the mat-progress-spinner to its initial state

I want to use the spinner as a timer and switch the progress direction. Currently, it moves clockwise when going from 0 to 100, but I need it to go counterclockwise from 100 (equivalent to 15 minutes or 900 seconds) to 0 (when time runs out). <mat-prog ...

What is the process for server-side rendering an Angular application with Angular Universal and incorporating an SSL certificate?

Typically, when I want my angular applications to run locally over HTTPS, I install a certificate and make changes in the angular.json file like this: "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { " ...

Is Typescript familiar with the import -> require syntax, but unfamiliar with the require -> import syntax?

My code includes a simple file that utilizes the ES6 module loader: 1.ts import {foo} from "./2" foo('hello'); 2.ts function foo (a){console.log(a);}; export {foo} When the tsconfig is configured as follows: "module": "commonjs", We can o ...

Error message alert - Subscription unable to capture observation

Currently, I am utilizing RXJS observable within Angular 4 in my project. import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/from'; The function that I have created looks like this: public temp(){ retu ...

What is the process for extracting the background color from a typescript file in Angular and connecting it to my HTML document?

My typescript array population is not changing the background color of my div based on the values in the array. I've attempted to set the background using [style.backgroundColor]="statusColor[i]", where statusColor is an array declared in my typescrip ...