Unable to resolve every parameter

I am facing an issue while trying to inject a service into my component, resulting in the following error:

https://i.stack.imgur.com/zA3QB.png

news.component.ts

import { Component,OnInit } from '@angular/core';
import { NewsService } from './index';


declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'news-selector-comp',
    templateUrl:'news.html'

})

export class NewsSelectorComponent implements OnInit {

      isLoading = true;
      isError   = false;
      News:any;


      constructor(public newsService:NewsService) { }

}

news.module.ts

https://i.stack.imgur.com/YeIAJ.png

news.service.ts

import {Http, Headers} from '@angular/http';
import { Injectable } from '@angular/core';
import { News, NewsImp } from './news';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class NewsService {

_url = '<%= SYSTEM_URL%>/news';
token   = window.localStorage.getItem('token');
user_id = window.localStorage.getItem('user_id');
    constructor(private _http:Http) {

    }

    getNews() : Observable<NewsImp[]> {

        return  this._http.get('https://jsonplaceholder.typicode.com/posts').map(res => res.json());
    }

    postNews() : Observable<News[]> {

      var headers = new Headers();
          headers.append('Content-Type', 'application/json');

      var news = {
        user_id: this.user_id,
        token  : this.token
      };

        return this._http.post(this._url, JSON.stringify(news), {headers:headers}).map( res => res.json().data);
  }

}

Answer №1

Personally, I've encountered a similar problem before, but due to a slightly different factor. It appears that you are implementing the "barrels" method in this case:

import { NewsService } from './index';

I suggest directly importing the NewsService class from its original file where it has been exported. This tends to be a recurring issue worth noting.

Answer №2

Everything appears to be correct in your code except for the following section.

import { BrowserModule } from '@angular/platform-browser';
import {NewsService} from './index';
@NgModule({
  imports:      [BrowserModule],   
  //In your main module, make sure to use BrowserModule as shown here.
  // In feature modules, you should use CommonModule

  declarations: [NewsSelectorComponent],
  providers:    [NewsService],
  bootstrap:    [NewsSelectorComponent]
})

I believe this code should function properly.

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

Issue with extending mongoose.Document properly in NodeJS and TypeScript using a custom interface with mongoose

I recently started learning Typescript and tried to follow this guide to help me along: After following the guide, I implemented the relevant code snippets as shown below: import { Document } from "mongoose"; import { IUser } from "../interfaces/user"; ...

Issues with Angular 5 and Firebase integration

After updating my computer to High Sierra with a clean install, reinstalling the angular-cli, and cloning one of my previous projects that uses Firebase and angularfirebase2, I encountered an issue where any operation to get data from Firebase is not worki ...

Whenever I try to update my list of products, I encounter an error message stating that the property 'title' cannot be read because it is null

I am encountering an issue with editing data stored in the database. When attempting to edit the data, it is not displaying correctly and I am receiving a "cannot read property" error. HTML admin-products.component.html <p> <a routerLink="/ad ...

Exploring the optimal procedures to asynchronously request an external API in Node.js using TypeScript

When handling a POST API request in a Node.js application built using TypeScript, it's necessary to make a call to an external API. This external API operates independently and must run in the background without impacting the response time. How can t ...

Is there a way to invoke a function within a mat-error element?

I need to display an error message in my input field! The function will return true if both passwords match, otherwise it will return false. How can I invoke a boolean function inside mat-error! My Function: checkPasswords(): Boolean { // 'passwords& ...

Angular 2: Implementing a Universal CSS Style Sheet

Is there a way to include a universal CSS file in Angular 2 applications? Currently, I have multiple components that share the same button styling, but each component has its own CSS file containing the styles. This setup makes it difficult to make changes ...

What is the functionality of the node class within a doubly linked list?

Within the Node class, the next property can only be assigned a value of type Node or null. class Node { value: any; next: Node | null; prev: Node | null; constructor(value: any) { this.value = value; this.next = null; this.prev = null ...

Error: Could not locate application for Ionic Serve command

I have been developing a project in Ionic2 on another computer. However, when I try to run ionic serve on my PC, an error message appears: 192.168.1.100:8100 Application not found I have configured my app to use a static IP address... How can I resolve ...

Some code paths fail to return a value in Google Cloud Function callable functions

When utilizing async functions in my cloud function and including a 'return' statement in each potential output, I am still encountering the error message Not all code paths return a value I attempted removing my database calls and only leaving ...

Restrict the number of items in a list in Angular 2 to a

I need help structuring a list of material cards in my application. The list can potentially have a large number of elements, so I want to limit it to showing only 5 items at a time and provide an option for the user to navigate through additional elements ...

Using Ionic 4 and Angular 7 to make straightforward remote HTTP requests with Cross-Origin Resource

I'm still navigating my way through ionic and angular, trying to understand how to send a basic HTTP request to a remote server without dealing with CORS. My initial attempt involved the following code snippet: this.httpClient.get<MyObj>("/api" ...

Select three random items from a string array list along with their corresponding indexes using TypeScript in Angular

Consider this example: I am working with a string array const groceries = [ 'milk', 'coriander', 'cucumber', 'eggplant', 'carrot', 'brinjal', 'on ...

Direct your attention to the <input> element

I'm developing a front-end application using Angular 5, and I am facing the challenge of implementing a hidden search box that should be displayed and focused when a button is clicked. Although I have explored various solutions from StackOverflow inv ...

Missing expected property in TypeScript casting operation

I recently came across this intriguing playground example outlining a scenario where I attempted to convert an object literal into an object with specific properties, but encountered unexpected results. class X { y: string; get hi(): string { ...

What could be causing my application to not locate the jquery module? ERROR: ENOENT: The specified file or directory cannot be found

I've decided to bring over an Angular project that already has a bootstrap template integrated into my own project. (Still unsure if this was the right move) One of the steps I took was adding these lines to the angular.json file: "styles": [ ...

What is the best way to retrieve data (using GET) following React state changes?

Whenever a user clicks on one of the orderBy buttons (such as name/email/date), a new rendered result should be fetched from the server by sending a new get request. The same applies to page pagination. Simply setting this.setState({ [thestate]: [newState ...

Display the initial x list items without utilizing ngFor in Angular 2

In the template, there are 9 <li> elements, each with a *ngIf condition present. It is possible that 5 or more of them may return true, but the requirement is to only display the first 4 or less if needed. Priority is given to the order of the < ...

I'm having trouble getting any data to emit when I subscribe to a state service subject that stores a hovered element. What could I be missing?

I am currently working on a project that involves a calendar, a hover directive, and a stateful service for communication. Here's a simplified representation of my work so far: https://stackblitz.com/edit/stackblitz-starters-kvzyvy?file=src%2Fmain.ts ...

Passing a React functional component with SVG properties to another component as a prop

My goal is to import a React functionComponent from an SVG and pass it as a prop to another component for rendering the svg. The code below compiles without errors, but crashes when trying to display the svg in the browser with the following message: Er ...

Creating a type that can be used with a generic type T along with an array of the same generic type T

I am experimenting with TypeScript for this project type ArrayOrSingleType<T> = T | T[]; interface TestType<T> { a: ArrayOrSingleType<T>; b: (v: ArrayOrSingleType<T>) => void; } const testVariable: TestType<number&g ...