CODEWITHSUNDEEP
angulartypescript
Muhammad Hamza
Muhammad Hamza

Reputation: 893

Call a service function from browser console in angular 6

I have just made a few changes to some methods in one of the services, and wanted to see if the changes had worked properly or not, but instead of creating a class and testing them out manually, I wanted to know if there was a way to call the functions in chrome's console.

I had followed this example for implementing a logger service, and added to my already created jwt service below.

Unfortunately I don't have any implementation of the error in the application so I can't really test it directly. I wanted to check if both conditions are working properly. I checked this answer out but when I try it for myself it gives me a null error (maybe because this expects a component and I want to test a service perhaps).

To give an example, here is my class, and a method as an example which I want to test in the console:

Jwt.service.ts

import { Injectable } from '@angular/core';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { LoggerService } from "src/app/services/logger/logger.service";
/**
* Injects the JSON web token service in the project
*/
@Injectable({
  providedIn: 'root'
})

/**
* This service is responsible for management of the jwt token, which would be used
* for authentication/authorization purposes. The service includes methods to save, delete
* and retrieve the token
*/
export class JwtService {


  constructor(
    private translate: TranslatePipe,
    private logger: LoggerService) { }

  /**
   * This method fetches the token from local storage and returns it.
   *
   * @method getToken
   * @return
   */
  getToken(): string {
    var token = window.localStorage['jwtToken'];
    if (token !== undefined) {
      return token;
    } else {
      this.logger.invokeConsoleMethod('error', this.translate.transform("generic[responses][error][token][001]"));
      throw new Error(this.translate.transform("generic[responses][error][token][001]"));
    }
}

Upvotes: 6

Views: 6000

Answers (2)

SimSimY
SimSimY

Reputation: 3686

you can also decale the types of your window object instread of guessing the types or dealing with TS errors.

This also works with objects exposed by the browser that you want to acess from the app (in Electron, WebVews and other hybrid apps)

declare global {
  interface Window  {
    myService: JwtService;
  }
}

@Injectable({
  providedIn: 'root'
})

export class JwtService {


  constructor()
   {
          window.myService = this;
   }
   /** **/
  }

Upvotes: 0

Nabil Shahid
Nabil Shahid

Reputation: 1458

To access a service in a console, it needs to be a global variable i.e. in window object of browser. There is a little trick which i use to access a service class instance in the console.

In the constructor of the console, you can do window.myService=this but typescript wont let you do that because of window definition. Instead, you can do window['myService'] = this. Using this you can access the service using myService or window.myService.

In your case it will be:

import { Injectable } from '@angular/core';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { LoggerService } from "src/app/services/logger/logger.service";
/**
* Injects the JSON web token service in the project
*/
@Injectable({
  providedIn: 'root'
})

/**
* This service is responsible for management of the jwt token, which would be used
* for authentication/authorization purposes. The service includes methods to save, delete
* and retrieve the token
*/
export class JwtService {


  constructor(
    private translate: TranslatePipe,
    private logger: LoggerService) {
          window['myService'] = this;
   }

  /**
   * This method fetches the token from local storage and returns it.
   *
   * @method getToken
   * @return
   */
  getToken(): string {
    var token = window.localStorage['jwtToken'];
    if (token !== undefined) {
      return token;
    } else {
      this.logger.invokeConsoleMethod('error', this.translate.transform("generic[responses][error][token][001]"));
      throw new Error(this.translate.transform("generic[responses][error][token][001]"));
    }
}

You can then access your service in the console using myService or window.myService.

Also, make sure to remove this line for production as it might cause security issues.

Upvotes: 15

Related Questions