The issue lies in the error code TS2315 which states that the type 'observable' is not a generic

I keep encountering an error message that says 'observable is not generic' while importing files. I am working on implementing CRUD operations in Angular 7, where I have created two components for adding and listing employees. The functions for creating and retrieving the employee list are written in "policy.service.ts", and this is where I am facing the issue.

This is a snippet from my package.json file:


{
    "name": "crudop",
    "version": "0.0.0",
    ...
}

policy.service.ts


import {
    Injectable
} from '@angular/core';
...
import {
    Observable
} from 'rxjs/Observable';


@Injectable({
    providedIn: 'root'
})
export class PolicyService {

    constructor(private http: HttpClient) {}
    private url = 'api/employees';

    getEmployees(): Observable < IEmployee[] > {
        return this.http.get < IEmployee[] > (this.url);
    }

    createUseremployee(user: IEmployee): Observable < IEmployee > {
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type':'application/json'
            })
        };
        return this.http.post < IEmployee > (this.url, user, httpOptions);
    }
}

The problem lies with the getEmployee and createUseremployee functions where the type 'observable is not generic'. I am contemplating whether to reinstall everything or if there is another solution that could resolve this issue.

policyservice

Answer №1

Make sure to include curly braces {} when importing Observable from the rxjs library.

import { Observable } from 'rxjs';

This method worked successfully for me:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs';

export interface IEmployee {
   id: number
}

@Injectable({
    providedIn: 'root'
})
export class PolicyService {

constructor(private http: HttpClient) { }
private url = 'api/employees';

getEmployees(): Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this.url)
}

createUseremployee(user: IEmployee): Observable<IEmployee> {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type ': 'application/json'
        })
    }
    return this.http.post<IEmployee>(this.url, user, httpOptions);
}

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

When utilizing the multipart/form-data content type in a form, the files being sent are transmitted as blank

I am currently developing a VueJS component that functions as a form to collect user information and enable multiple image uploads. The form is set with enctype="multipart/form-data" and exhibits the following structure : <template> <div> ...

Having difficulty implementing NG Zorro into the project because of a dependency issue

While attempting to integrate the NG Zorro library into my Angular project, I encountered an issue when running ng add ng-zorro-antd. The error message displayed was: code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While ...

Guide to successfully passing a function as a prop to a child component and invoking it within Vue

Is it really not recommended to pass a function as a prop to a child component in Vue? If I were to attempt this, how could I achieve it? Here is my current approach: Within my child component - <template> <b-card :style="{'overflow-y&apo ...

Error: The variable __WEBPACK_EXTERNAL_MODULE_XX__ has not been defined

A unique npm package called our-map has been developed utilizing TypeScript, webpack, and the ArcGIS JS API to encapsulate an esri map within a React component. The functionality of the module has been verified through testing on a dedicated page within th ...

The Jquery ajax request fails to function properly once the webpage has been published live

We've implemented a basic jQuery ajax call. A "more" button triggers a call to another PHP file when clicked. While it worked fine on my local server and initially on the live server, it suddenly stopped working live. The code functions perfectly o ...

Determine the week number based on a specified starting day for the week

If I have a custom week start day other than Monday, how should the getWeekNumber() prototype for the Date class be modified? Here is the existing code for calculating the ISO Week Number: Date.prototype.getWeekNumber = function() { // Create a dupli ...

Open the JSON file and showcase its contents using Angular

I am attempting to read a JSON file and populate a table with the values. I've experimented with this.http.get('./data/file.json') .map(response => response.json()) .subscribe(result => this.results =result, function(error) ...

pressing the enter key to submit form

Searching for videos is presenting a challenge for me when I try to submit the search form by pressing enter, but everything works fine when I click the button. After clicking, the text gets cleared and the /search page loads with the search index displa ...

Adjust the size of icon passed as props in React

Below is the component I am working on: import ListItemButton from '@mui/material/ListItemButton'; import ListItemIcon from '@mui/material/ListItemIcon'; import Tooltip from '@mui/material/Tooltip'; const MenuItem = ({data, o ...

Ways to retrieve output from a JavaScript function

How can I successfully return the result from response.on within the signIn function? const signIn = async (password) => { var request = new DeviceAuthQuery(); request.setPassword(password); var response = client.authenticate(request, {}, (err, ...

The error code TS2345 indicates that the argument type 'Event' cannot be assigned to a parameter type 'string'

Hello, I'm a newcomer to utilizing Angular and I'm struggling to identify where my mistake lies. Below is the TypeScript code in question: import { Component } from '@angular/core'; @Component({ selector: 'app-root' ...

Error encountered: Attempting to upgrade Intel App Framework 2.1 resulted in TypeError: o.promise is not a function

During the process of updating Intel App Framework from version 2.0 to 2.1, I encountered a jQuery error stating 'TypeError: o.promise is not a function in jQuery'. The current setup includes jq.appframework.min.js alongside jquery-1.11.0.min.js. ...

Tips on implementing .on() with querySelector in jquery?

Can you help me convert the jQuery code below into a querySelector method? <script type="text/javascript"> jQuery(function($){ $('#woocommerce-product-data').on('woocommerce_variations_loaded', function() { $ ...

Launch a component in a separate browser tab

I decided to open my component "template1" in a new tab, so I set up the path as follows: const routes: Routes = [ {path : 'template1' , component: Template1Component} ]; In the HTML file: <a mat-raised-button color="primary" target="_bl ...

Detecting changes in a readonly input in Angular 4

Here is a code snippet where I have a readonly input field. I am attempting to change the value of this readonly input from a TypeScript file, however, I am encountering difficulty in detecting any changes from any function. See the example below: <inp ...

Using AngularJS to extract values from deeply nested JSON structures

I'm currently navigating through a nested JSON object and I'm facing challenges in accessing the sub items within it. Below is a snippet of the JSON file I'm working with. It has successfully passed the JSONLint test, so it should be in pro ...

Allowing certain routes to be processed by Groovy while others are managed by react-router v4

I'm currently dealing with a situation where the backend Groovy code contains controllers that render GSP (Groovy Server Pages), while for the frontend we're utilizing react-router v4 to manage routes. The issue that I am facing is that when defi ...

What's the best method for securely handling user input containing iframes from a WYSIWYG editor?

I have implemented a feature using the TinyMCE WYSIWYG editor that allows users to input rich text content. Users have the ability to paste links to rich media in the editor, which automatically detects and creates an iframe display. This means that pastin ...

Angular is incorrectly updating all fields at once instead of updating only the intended one field

I am facing an issue with my *ngFor loop where I am attempting to update a number field on click, but it ends up updating all the items with the same value. Here is a snippet of my HTML: <form *ngFor="let product of products" [formGroup]=&quo ...

Having a collection of JSON objects, I am unable to remove an element using the pop() method in JavaScript

Hello everyone, I have a collection of JSON objects that are initially set to null in the program like this: var jsonToSaveToDB = [ { ProductID: null, Quantity: null, TotalPrice: null } ]; As the pr ...