Error encountered in the auth service Observable for the Metronic Angular 8 login page. The issue persists when utilizing the same source code in the default component, where it functions

Issue with Observable in Metronic Theme Angular 8

I have encountered an error while using the auth service in another component of the Metronic Theme for Angular 8. The same service works without any errors in the default logic component.

this.auth
        .login(authData.email, authData.password)
        .pipe(
            tap(user => {
                console.log(user);
                if (user) {
                    this.store.dispatch(new Login({authToken: user.accessToken}));
                    this.router.navigateByUrl(this.returnUrl); // Main page
                } else {


this.authNoticeService.setNotice(this.translate.instant('AUTH.VALIDATION.INVALID_LOGIN'), 'danger');
                    }
                }),
                takeUntil(this.unsubscribe),
                finalize(() => {
                    this.loading = false;
                    this.cdr.markForCheck();
                })
            )
            .subscribe();
    }

Error Message :

ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:28)
    at subscribeToResult (subscribeToResult.js:15)
    at TakeUntilOperator.push../node_modules/rxjs/_esm5/internal/operators/takeUntil.js.TakeUntilOperator.call (takeUntil.js:14)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:24)
    at FinallyOperator.push../node_modules/rxjs/_esm5/internal/operators/finalize.js.FinallyOperator.call (finalize.js:13)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:24)
    at AuthComponent.push../src/app/views/pages/auth/auth.component.ts.AuthComponent.submit (auth.component.ts:176)
    at Object.eval [as handleEvent] (AuthComponent.html:63)
    at handleEvent (core.js:29239)
    at callWithDebugContext (core.js:30309)

AuthComponent.html:63 ERROR CONTEXT 
DebugContext_ {view: {…}, nodeIndex: 102, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AuthComponent_0    @   AuthComponent.html:63
proxyClass  @   compiler.js:20830
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError  @   core.js:30271
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError    @   core.js:4055
dispatchEvent   @   core.js:19863
(anonymous) @   core.js:28448
(anonymous) @   platform-browser.js:1032
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask    @   zone.js:423
onInvokeTask    @   core.js:26247
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask    @   zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask   @   zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask    @   zone.js:498
invokeTask  @   zone.js:1693
globalZoneAwareCallback @   zone.js:1719

Please assist me with resolving this issue.

javascriptangulartypescriptangular8metronic

Answer №1

I encountered a problem with the this.unsubscribe in takeUntil(this.unsubscribe), and I'm sharing this solution for anyone facing a similar issue. To avoid wasting your time, simply remove either the line takeUntil(this.unsubscribe) or this.unsubscribe.

this.auth
    .login(authData.email, authData.password)
    .pipe(
        tap(user => {
            console.log(user);
            if (user) {
                this.store.dispatch(new Login({ authToken: user.accessToken }));
                this.router.navigateByUrl(this.returnUrl); // Main page
            } else {
                this.authNoticeService.setNotice(this.translate.instant('AUTH.VALIDATION.INVALID_LOGIN'), 'danger');
            }
        }),
        /**takeUntil(this.unsubscribe), commented it is undefined**/
        finalize(() => {
            this.loading = false;
            this.cdr.markForCheck();
        })
    )
    .subscribe();
}

I hope this saves you some valuable time.

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

Ways to implement shader on a THREE.Object3D that has been loaded using OBJMTLLoader

After loading a model with THREE.OBJMTLLoader, I want to add a vertex and fragment shader to it. var loader = new THREE.OBJMTLLoader(); loader.addEventListener('load', function(event) { var mesh = event.content; scene.add(mesh); }); load ...

javascriptthree.jswebglshader

A step-by-step guide on setting up a Twilio channel using Node.js

I'm developing an application that requires the creation of a chat channel when specific conditions are met after the user updates a database table (the chat channel needs to be created from the server side). Currently, I am utilizing Node.js on AWS ...

javascriptnode.jstwilio

UPDATE: Choosing several classes and then toggling the classes independently for each one

I have managed to make this work, but I am considering if there is a more efficient solution. My objective is to modify the divs using classes exclusively. I aim to toggle 4 classes with just one click. First, I obtain the class for the button and then a ...

javascriptarraysclasstoggle

I am using Chart.js to add colors to every 7th vertical grid line on the x-axis, visually representing the start of each new week

Having some trouble with the function(context) in my Java code. When I use an array, everything works fine. However, when I try to convert it into a formula, it doesn't seem to be running. I'm new to Java, so I think it must be something simple t ...

angularchart.js

Form a bond with the latest SignalR library to initiate communication

After attempting to connect to an asp.net core signalR server using the code below, I encountered some issues. Can you spot where I might have gone wrong? Here is the error message that I received: Error: The "promise" option must be a Promise v ...

javascriptjquerykendo-gridasp.net-core-signalr

Not enough resources error in ajax code for live update clock functionality

Recently, I developed a real-time clock that updates every second. Surprisingly, when I tested it on my local environment, everything worked perfectly without any errors. However, the situation drastically changed when I decided to upload it to my web host ...

javascriptjqueryajax

Activate Bootstrap datetimepicker by using the enter key to automatically populate the initial date

Check out the Bootstrap datetimepicker on this page: I'm trying to make it so that when the datetimepicker is first shown, pressing the enter key will hide the widget and insert the current date into the input field. I've experimented with a few ...

javascriptjquerytwitter-bootstrapbootstrap-datetimepicker

Struggling to dynamically create form controls within Angular forms and receiving the following error in the console: "TypeError: feature_r5.get is not a function"

When I click a button in my Angular v14 HTML template, I am trying to dynamically generate form controls and although I am able to generate them, an error is popping up in the console. ERROR TypeError: feature_r5.get is not a function at PostAdvComponent_ ...

javascriptangularuser-interfaceangular14

After my jQuery functions are executed, my CSS rules are loaded

Struggling with the communication between CSS and jQuery, I find myself torn. In CSS, my rules are often very specific, like this: div#container > div#contentLeft { //Code here } However, when I add jQuery to spice up my site, the CSS rules seem to ...

javascriptjquerycss

Is there a way to set a value within a jQuery function, and then invoke another function to utilize that value?

Suppose I have a function called isPercentage, which utilizes a value that is defined within the function it's being called in: isPercentage = function(){ if (value < 1){ value = value * 100; console.log(value); ...

javascriptjquery

ngOnChanges will not be triggered if a property is set directly

I utilized the modal feature from ng-bootstrap library Within my parent component, I utilized modalService to trigger the modal, and data was passed to the modal using componentInstance. In the modal component, I attempted to retrieve the sent data using ...

angulartypescript

Trouble with Displaying 3rd Level JQuery Dropdown Menu

Currently working on implementing a 3 level dropdown feature. I have been using a third-party responsive menu in Opencart and it's been working well. You can see a demo of it here: Unfortunately, Opencart does not natively support 3 level categories, ...

javascriptjqueryhtmlcssopencart

Tips for developing a web-based whiteboard application

I am tasked with developing a web application that allows users to design factory layouts by dragging and dropping pre-built components like robots, manufacturing cells, and conveyors onto a canvas. The goal is to create something similar to websites such ...

javascriptreactjstypescripthtml5-canvasfabricjs

AJAX response for form validation

I need to validate my contact form when the submit button is clicked. If all fields are valid, I want to display a Processing message using AJAX, followed by a success message with the entered name. The content of my Form is: <form onsubmit="return va ...

javascripthtmlajax

"Encountering Issues with Angular's Modules and EntryComponents during Lazy Loading

Upon lazy loading an Angular module, I encountered an issue when trying to open my DatesModal that resulted in the following error: No component factory found for DatesModal. Have you included it in @NgModule.entryComponents? The declaration and entryCom ...

javascriptangulartypescriptangular7lazy-loading

Using React, TypeScript, and Next.js to transform all elements in a static array to their last occurrence

I'm having trouble updating my array. Every time I click the button for the second time, only two or more records are added, similar to the last one I added. Does anyone know how to fix this issue? In the images below, you can see the results of the ...

arraysreactjstypescriptnext.js

There is no definition for Angular 4 Material stepper tags

After thoroughly studying the Angular Material stepper documentation, I encountered an issue when attempting to integrate the HTML Material stepper tag into my Angular application. The error message stated that it's not a known element. HTML: <ma ...

angularclassangular-materialangular-material2angular-material-stepper

type Y does not contain property X

When I encounter this error message: The property 'module' is missing in the type 'Menu'. The property 'parentId' is not found in the type 'Menu'. the code snippet triggering it appears like this: private menus: ...

angulartypescript

Locate identical values in Vuejs

When working with an array of objects, I need to check if a newly inserted object is a duplicate or not. this.duplicate = false; for(let item of this.items){ if(item.id && this.item.name === item.name) { t ...

javascriptvue.jsvuejs2

Node-pty in NWjs application causing DLL malfunction

When attempting to run a terminal emulator / command prompt in NW.js using xterm JS and node-pty, I encountered a DLL Error. The following is the log: Uncaught Error: A DLL Initialization Routine Failed. \\?\C:\Users\volke.a\ ...

javascriptnode.jsterminalnwjs