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;
  }
}

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

Striking through the value of a Material-UI TextField variant label

For my project, I attempted to implement the TextField component from Material-UI in the outlined variant. However, I encountered an issue where the label overlaps with the value. How can I resolve this issue? Check out this screenshot showing the mixed-u ...

What is the best way to retrieve the instance of a different component?

This question is not specifically referring to a child component, and therefore using ViewChild is not an option. The query here is if it's feasible to inject any component into another component. There was a related discussion on Stack Overflow, but ...

What is causing the Angular HTTP Post method error "Property 'post' is undefined"?

Encountering an error while using Angular's HTTP Post method: Cannot read property 'post' of undefined. I am attempting to send my first HTTP POST request, but it is not functioning as expected. export class RegisterComponent impleme ...

Problem with loading image from local path in Angular 7

I'm having trouble loading images from a local path in my project. The images are not rendering, but they do load from the internet. Can someone please help me figure out how to load images from a local path? I have already created a folder for the im ...

Incorrectly calling Asset URL in a single spa micro front-end

Currently, I am utilizing the single-spa library to implement micro front-end functionality. My challenge lies in using assets within my pages as the generated URLs for fetching these assets are incorrect. For example, when attempting to use an informati ...

Guide on how to showcase JSON data using vanilla JavaScript within the Laravel framework

As a beginner in Laravel, I am looking to pass JSON data from my controller using vanilla JavaScript to my view blade. However, I am unsure of the steps to accomplish this. Below is an example of my controller: public function index(Request $request) { ...

How to globally install electron using NPM on Ubuntu

Encountering an issue while trying to resolve this problem. Upon installing electron globally using NPM, the following error is displayed: ole@mki:~/angular-electron$ sudo npm install electron -g /usr/bin/electron -> /usr/lib ...

What is the best approach to handle Flow types for component props and getDerivedStateFromProps when the props are not the same

Having a Component with its props, an additional prop is added for getDerivedStateFromProps. The issue arises when setting the props with the additional one, throwing an error that the prop is not being used. Conversely, setting it without the extra prop c ...

Troubleshooting TypeScript in Visual Studio Code

Currently, I'm attempting to troubleshoot the TypeScript code below using Visual Studio Code: class Student { fullname : string; constructor(public firstname, public middleinitial, public lastname) { this.fullname = firstname + " " + ...

Optimal data structure for storage in a Next.js project with TypeScript

What is the appropriate data type for store in export let store: any; other than any? I have used @ts-igore to suppress TypeScript errors on the last line. How can I address the TypeScript error for that as well? I mentioned the boilerplates utilized in ...

Exploring variables within an Angular2 component's view

Is there a way for me to access and display the coordinates in my template? export class DashboardPage { constructor(public navCtrl: NavController) { Geolocation.getCurrentPosition().then(pos => { console.log(pos.coords.latitude, pos.coor ...

Tips for assigning an external variable using Angular RxJS map function?

I am currently working on making code more reactive and declarative by using the async pipe to update the template. I'm facing a challenge with changing a variable that was previously set in the subscribe() method. Updating this variable from the map ...

Exploring the Comparison Between Angular RxJS Observables: Using takeUntil and unsubscribing via Subscription

When it comes to unsubscribing from observables in Angular components utilizing ngOnDestroy, there are multiple approaches available. Which of the following options is more preferable and why? Option 1: takeUntil The usage of RxJS takeUntil for unsubscri ...

Enhance Leaflet Marker functionality using Typescript

I am currently tackling a project that involves using Typescript and Leaflet. Traditionally, to extend the leaflet marker in JavaScript, it is done like this: L.Marker.Foo = L.Marker.extend({...}); But when I attempt to do this in Typescript, I encounter ...

When deleting a row, the pagination feature in <mat-table> may encounter issues with the sticky

Struggling with a problem that I couldn't find a solution for online, so hoping to get some help here. I'm currently working on a dynamically-filled table where users can delete individual rows. The table has a sticky column and pagination, but I ...

Is there a way to effectively eliminate an array of objects in JavaScript or TypeScript and alter the object structure simultaneously?

I am seeking solutions to restructure an object that has multiple arrays of objects so that I can access the object directly. console.log(value.data.summary[0].data) Instead of accessing arrays in this manner, I want to modify my data structure. Is there ...

learning how to transfer a value between two different components in React

I have 2 components. First: component.ts @Component({ selector: "ns-app", templateUrl: "app.component.html", }) export class AppComponent implements OnInit { myid: any; myappurl: any; constructor(private router: Router, private auth: ...

Combining HTML with multiple .ts files in Angular

I've been dedicating time to enhancing an Angular application, particularly a sophisticated table with intricate styling and functionality. Within my component file, there is a whopping 2k lines of code that includes functions for text formatting, ta ...

Exploring ways to use TypeScript to export a Mongoose model?

There's a module I need to export in order to avoid the error "OverwriteModelError: Cannot overwrite Task model once compiled". I've tried various solutions but none seem to work. The problem lies in the last line (export default models...) impo ...

What is the best way to extract the inner text from an element within a QueryList<T>?

function addGoatToVaccinationGroup(goatObject: {earTag:string, id:number}){ for (let i = 0; i < this.vaccineQueue.length; i++){ if (this.vaccineQueue[i].earTag === goatObject.earTag){ this.vaccineQueue.splice(i, 1); ...