What could be the reason for the error message stating "Observable<Response> does not contain the property 'map'"?

I am currently working on an angular2 project with typescript in Intellij15. I have already imported 'rxjs/add/operator/map', but I am still encountering the error mentioned above. Despite checking various similar questions on SO, I have not been able to find a solution.

import {Component, OnInit} from "@angular/core";
import {Http} from "@angular/http";
import 'rxjs/add/operator/map';

@Component({
    selector: "h-recommend",
    template:`
    <div>
        hi
    </div>
    `
})

export class Recommendations implements OnInit{

    constructor (private _http: Http){}

    ngOnInit():any {

        this._http.get('../jsonfile/guestRecommendations/1.json')
            .map(res => res.json())
            .subscribe((data) => {
                this.hello();
                alert(data);
            });
    }

     hello(){
        alert("hello");
    }

}

Answer №1

It seems like the issue occurs during compilation, indicating that you may be missing the typings for es6-shim/core-js.

To resolve this, make sure to add the following snippet to your typings.json file:

{
  "globalDependencies": {
     "core-js": "registry:dt/core-js#0.0.0+20160317120654", // <-------
     "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
     "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

You can install these typings by running the typings install command in your terminal.

For more information, please refer to the following page:

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

What steps should I take to address the issue of ERESOLVE being unable to resolve the dependency tree during an

As I delve into the world of Angular and self-teaching, I encountered an issue after importing numerous new components into my project. Upon deleting the node_modules folder and running npm install, I am faced with the following error: npm ERR! ERESOLVE un ...

Encountering a 504 Gateway Timeout error while attempting to send a POST request to an API route in a NEXT.JS application that

I encountered a 504 error gateway timeout when attempting to post a request to api/webhooks, and in the Vercel log, I received a Task timed out after 10.02 seconds message. This code represents a webhook connection between my clerk and MongoDB. [POST] [m ...

The implementation of Typescript in Express does not rely on Middleware

I've encountered an issue with my Auth Middleware - it seems that the middleware isn't being called at all. Even when I intentionally throw an Error within the middleware function, nothing is printed out. For testing purposes, I only need to inv ...

Utilizing external clicks with Lit-Elements in your project

Currently, I am working on developing a custom dropdown web component using LitElements. In the process of implementing a feature that closes the dropdown when clicking outside of it, I have encountered some unexpected behavior that is hindering my progres ...

NativeScript app is functioning properly on the emulator but is experiencing crashes when running on a physical NS7 Angular10 device

Since updating to NativeScript 7 and Angular 10, my app runs smoothly on xCode emulators but crashes immediately after launching on a real device (specifically, iPhone 10 with iOS14). Below is the crash report from TestFlight: Date/Time: 2020-09 ...

Unable to connect dynamic information in Angular 8 component

Error encountered during dynamic component loading DynamicBuilderComponent.ngfactory.js:198 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: The expression has changed after it was checked. Previous value: 'ng-pristine: true'. Current ...

Flux Utils identified an issue stating that the Class constructor App cannot be called without the 'new' keyword

Struggling to set up a Flux Util container for this React component: class App extends React.Component<{},AppState> { constructor(props:Readonly<{}>){ super(props); } static getStores(){ return [ArticlesStore]; } static calcul ...

Express not functioning properly with custom error handler

I'm facing an issue while trying to implement a custom error handler for my Express routes. Despite following the instructions in the documentation which recommend placing the custom handler at the end of the use chain, it seems that the default error ...

Tips for navigating to a specific page using the Angular router

I am facing an issue where I want to switch between two pages using Angular router. Even though I have added both components to the Angular router, whenever I try different URLs, the browser always shows the "login" component. Surprisingly, if I remove the ...

Can we modify the auto-import format from `~/directory/file` to `@/directory/file`?

I have a small issue that's been bugging me. I'm working on a project using Nuxt3 and Vscode. When something is auto-imported, Vscode uses the ~/directory/file prefix instead of the preferred @/directory/file. Is there an easy way to configure Vs ...

Upon first render, useSession from Next Auth does not retrieve the session

I am currently working on a project to create a website using NextJS v13 and Next Auth v4. However, I have encountered an issue where the session is not returned in the initial render when utilizing the useSession hook. As a result, several components are ...

Is it possible to dynamically generate variables for React hooks during runtime?

Are there any methods to dynamically create variables for react hooks, allowing the values of these variables to be extracted and sent to an API at runtime instead of having predefined variable names set during design time like I am currently doing? Take ...

Is there a way to view Deno's transpiled JavaScript code while coding in TypeScript?

As I dive into Typescript with Deno, I am curious about how to view the JavaScript result. Are there any command line options that I may have overlooked in the documentation? P.S. I understand that Deno does not require a compilation step, but ultimately ...

Tips on how to access the names of all properties within a TypeScript class while excluding any methods

Looking to enhance the reactivity of my code, I want to render my view based on the properties of a class. How can I extract only the property names from a class and exclude methods? For instance: export class Customer { customerNumber: string; ...

What is the best way to retrieve the Base64 string from a FileReader in NextJs using typescript?

My goal is to extract a string from an object I am receiving in the response. const convertFileToBase64 = (file: File): Promise<string> => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.r ...

What is the correct method for decreasing the width of tab labels in Angular Material?

Addressing the Issue Given that /deep/, >>>, and ::ng-deep are no longer recommended, what is the appropriate approach to reduce the width of mat-tab-label which has a minimum width of 160px on desktop devices? Is there a way to achieve this wit ...

The sorting feature is not performing as anticipated

I'm dealing with an array of objects fetched from the backend. When mapping and sorting the data in ascending and descending order upon clicking a button, I encountered some issues with the onSort function. The problem lies in the handling of uppercas ...

Building sleek and interactive applications with Angular2 and Laravel, utilizing the power of Real-time updates and Web

I have developed an app and I am considering implementing a real-time battle feature using Angular 2 and Laravel. The idea is for players to interact with each other by clicking the "attack" button, resulting in their opponent's life decreasing in rea ...

Troubleshooting: JavaScript not displaying date in HTML input field

Currently, I am developing a hybrid application that utilizes both AngularJS and Angular 8. In this project, I am using a datepicker to display dates fetched from an API. However, I've encountered an issue where the date is only properly displayed whe ...

Combining SPA and ASP.NET MVC Routing techniques

In my current project, I'm handling a combination of Angular 2 and ASP.NET Core 2 (razor) routing. I am trying to figure out a way to switch from Angular routing to razor pages. I attempted to catch all unknown routes with Angular routing and reload t ...