The 'Subscription' type does not contain the properties _isScalar, source, operator, lift, and several others that are found in the 'Observable<any>' type

Looking to retrieve data from two APIs in Angular 8.

I have created a resolver like this:

export class AccessLevelResolve implements Resolve<any>{

constructor(private accessLevel: AccessLevelService) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    let id = +route.paramMap.get('id');

    const getControllerList = this.accessLevel.getAll().pipe(
        map(
            res => {
                if (res) {
                    return res.date;
                }
            }
        )
    )

    const getRoleAccessRole = this.accessLevel.getAllWithId(id).pipe(
        map(
            res => {
                if (res) {
                    return res.date;
                }
            }
        )
    )
   return forkJoin(getControllerList, getRoleAccessRole).subscribe(res => {
        return {
            controllerList: res[0],
            accessRoleList: res[1]
        }
    }
    )

}

However, I am encountering the following error:

Type 'Subscription' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more.

What could be causing this issue? How should I go about resolving it?

Answer №1

If you don't subscribe within your resolver, simply return the observable and let Angular handle the subscription:

return combineLatest(fetchData1, fetchData2).pipe(map(response => {
    return {
        data1: response[0],
        data2: response[1]
    }
}))

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

Unable to reset the input value to an empty string

I have created a table with a search bar feature that filters the data when the search button is clicked and resets the filter to show unfiltered data when the clear button is clicked. However, the current input value is not clearing from the display even ...

Generating a collection of objects using arrays of deeply nested objects

I am currently working on generating an array of objects from another array of objects that have nested arrays. The goal is to substitute the nested arrays with the key name followed by a dot. For instance: const data = [ id: 5, name: "Something" ...

Closing ngx-bootstrap modal post unit tests

After enabling the CSS style in the unit tests of my Angular app, I noticed that every time a component displaying a modal from ngx-bootstrap appears, it remains visible in the browser even after the unit tests for that component have completed running. T ...

using document references in puppeteer's evaluate/waitFor function

I'm feeling a bit lost when it comes to understanding the document reference in puppeteer's evaluate method. The official documentation shows some code that includes this reference within a waitFor function in a node script. I get that these line ...

Ways to expand the play and pause buttons and adjust the height of an HTML audio player

It's clear that the PLAY/PAUSE icons are smaller than intended, and the entire player is thinner than desired, making it difficult for some viewers to see. How can I enlarge the entire player? I have read that we do not have access to individual contr ...

Guide on making an NPM package with a web worker integration

Currently, I am in the process of developing an npm package that incorporates a web worker with type module. The issue arises when I try to link this package to a React application for testing purposes since the application cannot locate the worker.js file ...

Sharing information with Django through Ajax and jQuery

I'm facing an issue with posting html5 geolocation data to the django admin backend. I've managed to display the latitude and longitude on the html page but can't seem to successfully submit the data to django. I suspect there might be a pro ...

Troubleshooting the unresponsive Vue @change event within the <b-form-datepicker/> component

I am in the process of developing a website with both a select form and a datepicker form that will send an API request for data. I aim to have the data update dynamically whenever there is a change in either of these forms, thereby eliminating the need fo ...

Leveraging File functionality in TypeScript

In the process of developing a web application with Angular 4 and Typescript, I encountered an issue while attempting to retrieve the date of a file for upload. Specifically, when trying to access the lastModified property of a File object, Typescript retu ...

The React Native File generator

Currently, we are utilizing redux actions in our web project. In an effort to share logic between web and native applications, we have integrated these actions into our react native project with the intention of only having to modify the components. One o ...

Tips for utilizing Sass and CSS Modules within create-react-app

I've been using FileName.module.scss to style my react elements like this: // Component styling with SCSS import React from "react"; import Aux from '../../hoc/Aux'; import classes from './Layout.module.scss'; const lay ...

Utilizing AngularJS to access the corresponding controller from a directive

When I have HTML structured like this... <div ng-app="myApp"> <div ng-controller="inControl"> I enjoy sipping on {{beverage}}<br> <input my-dir ng-model="beverage"></input> </div> </div> a ...

Adding Logging Features in ASP.NET

I am currently working with an .ascx file that contains both JavaScript and div elements. I need to add a log statement inside a function for troubleshooting purposes. Can someone please guide me on how to achieve this? Below is a snippet of my code: fu ...

typescript tips for incorporating nested types in inheritance

I currently have a specific data structure. type Deposit { num1: number; num2: number; } type Nice { num: number; deposit: Deposit; } As of now, I am using the Nice type, but I wish to enhance it by adding more fields to its deposit. Ultima ...

How to eliminate duplicate items in an array using various criteria

I have an array arr that needs to be cleaned up by removing duplicate objects with the same e_display_id and e_type as P. In this scenario, only objects with status==='N' should be considered. Here is the input array arr: let arr = [ { e_type ...

Pressing the enter key on a table column in Angular will trigger an automatic button click

In my Angular 9 application, I have a dynamic table in the HTML with editable columns. When I edit a value and press ENTER, it triggers a click event associated with a button in another column instead of applying the edit. How can I prevent this unexpected ...

Passing data through Angular2 router: a comprehensive guide

I am currently developing a web application with the latest version of Angular (Angular v2.0.0). In my app, I have a sub-navigation and I want to pass data to a sub-page that loads its own component through the router-outlet. According to Angular 2 docume ...

Error Encountered: Unable to locate angular/core module in Angular 2

I have encountered an issue while setting up a new Angular2 app from the quickstart folder on the Angular website. Despite following all suggested solutions, I am still facing errors. After running npm install, everything seems fine as I can see my node_mo ...

Saving a JavaScript array as a Redis list: A step-by-step guide

I'm trying to figure out how to save array values individually in a Redis list instead of saving the whole array as a single value. Any suggestions on how to achieve this? P.S. Please excuse my poor English. var redis = require('redis'), ...

Dealing with errors in Next.js api: Best practices

When it comes to organizing code in Next.js api handlers, what is the most effective practice? In a video I watched, the presenter suggested placing all REST routes in two specific files: pages/api/users/index.ts would manage operations that do not requ ...