Issue: Unable to resolve all parameters for LoginComponent while implementing Nebular OAuth2Description: An error has occurred when attempting to

I have been attempting to utilize nebular oauth in my login component, following the documentation closely. The only difference is that I am extending the nebular login component. However, when implementing this code, I encounter an error.

export class LoginComponent extends NbLoginComponent implements OnDestroy {
  public user: SocialUser;
  private loggedIn: boolean;
  constructor(service: NbAuthService,options: {},cd: ChangeDetectorRef, router: Router) {
    super(service,{},cd, router);
  }

  alive = true;

  login() {
    this.service.authenticate('google')
      .pipe(takeWhile(() => this.alive))
      .subscribe((authResult: NbAuthResult) => {
      });
  }

  ngOnDestroy(): void {
    this.alive = false;
  }
}

https://i.sstatic.net/7cIEz.png

Can anyone help me understand what might be causing this issue?

Answer №1

Apologies for the previous error, I have now rectified it. The issue stemmed from not utilizing the NB_AUTH_OPTIONS injection token to resolve the options. The corrected code should appear as follows:

constructor(service: NbAuthService,@Inject(NB_AUTH_OPTIONS) options: {},cd: ChangeDetectorRef, router: Router) {
    super(service,options,cd, router);
  }

  alive = true;
  login() {
    this.service.authenticate('google')
      .pipe(takeWhile(() => this.alive))
      .subscribe((authResult: NbAuthResult) => {
      });
  }
  ngOnDestroy(): void {
    this.alive = false;
  }

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

"Tips for removing all child elements from a parent element using Angular's Renderer2 in versions 5 and above

Manipulating the DOM programmatically is recommended using Angular's Renderer2. Within my directive, I extract some text from el.nativeElement.innerText, modify it, and aim to append it to my element: const text = renderer.createText(`${el.innerTex ...

Angular allows for a maximum time span of 60 days between two date inputs

I am looking to implement a validation in JavaScript or TypeScript for Angular where the start date cannot be more than 60 days after the end date is entered. The requirement is to enforce a "maximum range of 60 days" between the two input dates (dateFro ...

What is the method for acquiring a dynamic angular component instance while conducting a test?

Check out this snippet of code: const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass); const dialogElement = document.createElement('some-dialog'); const componentRef = componentFactory.create( ...

Handling events in React using TypeScript

Currently diving into the world of React with Typescript and encountered a challenge involving event handling using the onClick property. I have a react component displaying a list of items from an array, and I aim to log the clicked item in the console. I ...

Understand and extract data from a JSON array using Typescript

Here is a JSON response I received from a remote server: { "string": [ { "id": 223, "name": "String", "sug": "string", "description": "string", "jId": 530, "pcs": [{ "id": 24723, "name": "String", ...

I'm having trouble setting a value for an object with a generic type

I am attempting to set a value for the property of an object with generic typing passed into a function. The structure of the object is not known beforehand, and the function receives the property name dynamically as a string argument. TypeScript is genera ...

Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

I'm currently utilizing Cytoscape.js for rendering a dagre layout graph. When it comes to styling the node, I am using the property width: label in the code snippet below: const cy = cytoscape({ container: document.getElementById('cyGraph&apo ...

Using Typescript to define Vuex store types

Attempting to create a TypeScript-friendly Vuex store has been quite the challenge. Following instructions outlined here, I've encountered an issue where accessing this.$store from a component results in a type of Store<any>. I'm strugglin ...

Combining multiple arrays of objects using multiple keys with Angular 9 and Typescript

I have two JSON objects (displayed here with JSON.stringify(array of objects)) GPRows data is [ { "shopName":"Testing One", "state":"NSW", "yearMonth":"20203", "id& ...

Encountering a 404 error with Angular 6 routing after refreshing the page when using an Nginx proxy

I currently have my angular application running within a docker container, exposed on port 83. Additionally, I have a separate spring-boot rest app running inside another docker container, exposed on port 8083. On the host server, there is an Nginx server ...

What is the best way to detect object changes in typescript?

Having an object and the desire to listen for changes in order to execute certain actions, my initial approach in ES6 would have been: let members = {}; let targetProxy = new Proxy(members, { set: function (members, key, value) { console.log(k ...

You can only use a parameter initializer within the implementation of a function or constructor

I recently started learning TypeScript and am currently using it for React Bricks. I've been working on rendering a 3D object with three.js, but I keep encountering the error mentioned above. I've attempted various solutions such as passing color ...

Enhancing a UMD module definition with TypeScript 2: A step-by-step guide

Currently, I am in the process of creating TypeScript definition files for two libraries that are meant to be used with the new @types approach. Both libraries adhere to the UMD pattern, allowing them to be consumed either as modules or by referencing them ...

Utilizing an Angular Service within a method, embedded in a class, nested inside a module

module Helper { export class ListController { static handleBatchDelete(data) { // Implementing $http functionality within Angular ... $http.post(data) } } } // Trigger on button click Helper.ListController. ...

Leverage the pre-defined Ionic Sass variables for optimal styling

Is it possible to utilize existing Sass Variables in Ionic 5 for our custom CSS classes? The specific variables I am referring to can be found here: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/ I'm interested in creating som ...

My goal is to intentionally trigger an eslint error when importing a file from index.ts

Is there a way to enforce importing components from index.ts within the src/components directory using eslint rules or plugins? // index.ts (src/components/Forms) export { Input } from './Input'; export { CheckBox } from './CheckBox'; ...

Is there a lack of compile checking for generics in Typescript?

Consider the code snippet below: interface Contract<T> { } class Deal<D> implements Contract<D> { } class Agreement<A> implements Contract<A> { } Surprisingly, the following code compiles without errors: let deal:Contract ...

When an Angular2 application is deployed on a server running NginX, child components fail to load

After deploying my Angular2 app on a server as a Docker image and serving it with NginX, I encountered an unexpected issue. When I ran the webpack-dev-server locally to verify if the build was successful, everything looked fine https://i.sstatic.net/wQQ7 ...

Using async-await in canActivate() within Angular 7

I am currently working on a code that verifies whether the browser contains user information. If not, the browser will make an API call to retrieve the user information from the server. Only users with valid information are granted access to navigate to di ...

Information about the HTML detail element in Angular 2 is provided

Hi, I'm curious if there's a way to know if the details section is open or closed. When using <details (click)="changeWrap($event)">, I can't find any information in $event about the status of the details being open. I am currently wor ...