Encountering error: Unable to locate the reference 'Http' in Angular 10

I have encountered an issue while trying to render an external input template in my Angular Component. The 'http' module is not being found, even though I have installed @types/node in the project. This has failed to resolve the dependency.

Here is the code snippet I am using:

<div style="height: 300px;">
    <div [innerHTML]="stepTemplate"></div>
</div>

setView() {
   const temp =  this.inputModel.templateUrl;
   this.stepTemplate = this.http.get(temp).map((html: any) => this.stepTemplate = html);
}

import * as Http from 'http';    
export class JourneyLineComponent implements OnInit, AfterViewInit {
    
        .....
        http: Http;
    }

Answer №1

This should be the solution you are looking for regarding your data import

You need to include this line in your code:

import { HttpClient } from '@angular/common/http';

Angular made the switch to using HttpClient instead of Http a few versions ago

Additionally, make sure to inject it into your constructor like this:

constructor(private http: HttpClient) {}

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

"Enhance Your Search with PrimeNG's AutoComplete

Currently, I am attempting to implement the autocomplete feature from primeNg based on their documentation, but I am facing issues with displaying the suggestions. Firstly, I added the AutoComplete module by importing it: import { AutoCompleteModule } fro ...

Verifying TypeScript Class Instances with Node Module Type Checking

My current task involves converting our Vanilla JS node modules to TypeScript. I have rewritten them as classes, added new functionality, created a legacy wrapper, and set up the corresponding Webpack configuration. However, I am facing an issue with singl ...

Python sends POST request with JSON data using content type "x-www-form-urlencoded"

Python request: # encoding=utf-8 from __future__ import print_function import requests headers = { # 'content-type': 'application/json', 'content-type': 'application/x-www-form-urlencoded', } params = { ...

Exploring Iteration of TypeScript Arrays in ReactJS

Issue Encountered: An error occurred stating that 'void' cannot be assigned to type 'ReactNode'.ts(2322) The error is originating from index.d.ts(1354, 9) where the expected type is related to the property 'children' defi ...

What is the reason behind continuously receiving the error message stating "Not all code paths return a value here"?

Can someone help me understand why I am consistently encountering this error message from typescript? PS. I am aware that in this scenario I could simply use a boolean and not create a function, but my focus here is on typescript. I keep receiving the er ...

Setting the time for an Angular Material datepicker in Angular 8

How can I set the time to 00:00:00 for the angular material datepicker when selecting the current date? Currently, it displays the system's current time. I am working with reactive forms and here is my code snippet: today = new Date(); createForm ...

Integrating Typescript into function parameters

I am attempting to make my function flexible by allowing it to accept either a string or a custom type onPress: (value: string | CustomType)=>void But when I try to assign a string or CustomType, the compiler gives an error saying is not assignable to ...

Angular provides the capability to sort through data using various criteria

I have received an array of objects in a specific format from the server, which may contain more than 2 objects. [ {processId : 1, processName : "process1", country : "germany", companyCode:"IB" , companyHiringType:"FRE", masterClauses:[ {cl ...

Adding ng-add & npm link - A guide to mocking the npm registry

I'm currently working on a collection of schematics for @angular/cli and I want to test it locally. Is there a way to test the ng-add CLI feature locally? When I link my project using npm link and run ng add myFeature, @angular/cli attempts to downl ...

Incorporating a filtering search bar in Ionic React to efficiently sort pre-existing lists based on their titles

Struggling to implement a search bar in my Ionic application has been quite challenging. I've searched for examples and tutorials, but most of them are based on Angular with Ionic. The React example in the Ionic docs didn't provide much help eith ...

Creating fresh records in LDAP server via an angular 4 application

I need to incorporate new users into my ldap system with OpenLDAP as the server. Is there a specific node module that I can utilize within my Angular application for this task? If anyone has an example demonstrating how to do this, it would be greatly ap ...

Extending the number of rows in an Angular mat-table beyond the size of the dataSource

Is there a way to display more rows of data in a mat-table than the length of the provided dataSource? For instance, consider the following sample data: people: [ { name: "John", birthday: "01.01.2000", hobbies: ...

Spring Boot being called from Angular App: Access-Control-Allow-Origin restriction not permitted

Having an issue with CORS while trying to connect my Angular 8 app to a Spring boot REST API. Despite researching online, I haven't been able to resolve the problem. http://localhost:4200 ---------------> http://localhost:8080 The CORS error mes ...

What steps can I take to stop AngularJS2 from generating an error when the server sends a 410 (gone) response?

When using my AngularJS2 application to delete a resource, the server responds with a 410-GONE status code. However, AngularJS2 interprets this as an error. How can I configure AngularJS2 to recognize that a 410 response is valid? Here's a snippet of ...

The issue with converting a string into an object in Typescript

I am having trouble converting the JSON response from the websocket server to a TypeScript object. I've been trying to debug it but can't seem to find where the error lies. Can anyone assist me in resolving this issue? Below is the code snippet ...

Creating dynamic components in ReactJS allows for versatile and customizable user interfaces. By passing

Within the DataGridCell component, I am trying to implement a feature that allows me to specify which component should be used to render the content of the cell. Additionally, I need to pass props into this component. Below is my simplified attempt at achi ...

Avoiding Re-renders in an Angular2 Countdown Component

I am facing an issue with my Angular2 master component that includes multiple child components and a standalone countdown component called "clock". The countdown component updates its label every second, causing unnecessary re-rendering of the master compo ...

Tips for displaying bar chart labels effectively with ChartJS

I am working on an Angular project and I would like to incorporate a barchart using ChartJS. The data for this chart can vary in size, sometimes being very large. One issue I have encountered is that when the number of data points is large, the labels ove ...

Learn how to reposition the mat-option easily

I have an angular app with an autocomplete field that I need to adjust the position of. I have consulted the official documentation under the method updatePosition, which states: "Updates the position of the autocomplete suggestion panel to ensure that it ...

Building a route to a link in Next.js: A step-by-step guide

Having trouble setting up routes to my Next.js portfolio project page. I've created an array of pages and their links in the index.ts file within the data folder, but I'm facing issues with routing. I've integrated a floating navigation usi ...