Unexpected error with service providers in Ionic 2 and Angular 2 using Typescript

When attempting to run my Ionic2 app in Typescript, I encountered the following error:

ORIGINAL EXCEPTION: No provider for User! (BeerSearch -> User)

Here is the relevant code snippet:

#providers/beer_search/BeerSearch
import { User } from '../user/user';
......

@Injectable()
export class BeerSearch {
   constructor(private http: Http, user: User, config: Config) {
    this.headers = new Headers();
    this.headers.append('Access-Token', user.getAccessToken())
  }
}

#providers/user/user
.....

@Injectable()
export class User {
  accessToken: string;

  constructor(private http: Http) {
    this.accessToken = '<Some token>';
  }

  getAccessToken(){
    return this.accessToken;
  }
}

I am unsure of what mistake I have made here, especially since there are no compile-time errors indicated by Typescript. The issue only arises at runtime.

Answer №1

If you need to call services within services within services, there's no problem with that at all. Simply add them to either the bootstrap providers array:

bootstrap(App, [..., User, BeerSearch]);

or to the providers array of the root component.

@Component({
    ...,
    providers: [..., User, BeerSearch]
})
export class FooComponent { ... }

Otherwise, they won't be resolved properly as you are currently experiencing.

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

Retrieve a particular item using the NGXS selector and incorporate it into the template

I am retrieving stored configuration settings from an API. Each setting includes an 'ID' and several properties like 'numberOfUsers', etc. I am utilizing NGXS for managing the state. My goal is to specifically fetch the 'numberOf ...

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

Establishing the state using React in conjunction with TypeScript

Struggling to understand how to utilize TypeScript to set the state of my React component. Currently developing a basic Todo list Creating a component for the entire list named: TodoList Desire to populate the list with initial items for testing purpos ...

Tips for accessing the nested formArray value using a getter in Angular

I am currently attempting to retrieve form values using the getter method and then dynamically pushing them to update the form with values. However, I am faced with a nested array at the moment, which is causing issues with retrieving the form values. Bel ...

Creating a personalized .hasError condition in Angular 4

I am currently in the process of modifying an html form that previously had mandatory fields to now have optional fields. Previously, the validation for these fields used .hasError('required') which would disable the submit button by triggering a ...

Upgrading to Angular 2: Utilizing ElementRef in ES5

Currently, I am facing a challenge in creating an Attribute directive for Angular 2 that would allow me to set multiple default HTML attributes using a single custom attribute. My intention is to apply this directive specifically to the input element. Howe ...

Inject an asynchronous callback into the constructor of a class by leveraging TypeScript and Node with Passport integration

Currently, I am utilizing the passport-http authentication library. The issue at hand is that its documentation makes use of callbacks while my implementation involves TypeScript classes with async/await functionalities, thus causing uncertainty regarding ...

Exploring the functionality of $scope.$watch in ES6

I'm encountering a problem while utilizing $scope.$watch in my ES6 project. The watch triggers once and then doesn't work thereafter. Below is the snippet of code: export class SomeController { constructor($log, $scope) { 'ngInject&a ...

How to toggle all checkboxes in Angular 2

Can anyone help me figure out how to select/unselect all checkboxes in my code? I've tried looking at other examples but haven't been successful. In the code below, I have managed to select/unselect individual units by clicking on them. When I c ...

Instructions on invoking a function when a button is clicked

I am attempting to trigger a dataUpdate function upon clicking the edit() button I am striving to modify the record Current Version: Angular CLI: 10.0.6 Angular: 10.0.10 https://i.sstatic.net/4MR8P.png registration.component.html <div> ...

Using ng-bootstrap with Bootstrap 4 beta as an npm dependency

After updating my npm dependencies in package.json to Bootstrap 4 beta and ng-bootstrap to 1.0.0-beta.5, I encountered an "UNMET PEER DEPENDENCY" for popper.js when running npm install due to its new addition as a dependency in Bootstrap 4 beta. Despite th ...

Is there a way to specify patternProperties in a JSON schema and then map it to a TypeScript interface?

I'm in the process of developing a TypeScript interface that corresponds to a JSON schema. The specific field in my JSON schema is as follows: "styles": { "title": "Style Definitions", &qu ...

Context API is failing to work in components that use children when the version is v16.6.0 or higher

Currently, I am utilizing the latest context API of React (v16.6.0 or higher) by specifying the public static contextType inside the component that consumes the context. Everything works smoothly unless the component declaring the Provider directly include ...

Template reference does not connect to the ApexChart graphic

As a newcomer to ApexCharts.js, I am currently working on setting up a Vue3 app using Composition API along with the setup syntax. My goal is to reference the template ref of 'apexchart' so that I can later call the dataURI() function on it. I am ...

Using Jest to verify whether a specific class instance in JavaScript/Typescript calls a function

Currently, I am running tests on express middlewares using jest. it("should throw 400 error if request.body.id is null", () => { const req = { body: { id: null } } as any; const res = {} as any; const next = jest.fn(); myMiddle ...

Tips for extracting a keyword or parameters from a URL

I'm in the process of creating my personal website and I am interested in extracting keywords or parameters from the URL. As an illustration, if I were to search for "Nike" on my website, the URL would transform into http://localhost:3000/searched/Nik ...

Tips on determining the data type for a personalized useFetch hook

I want to develop a useFetch hook to handle various types of data like objects and arrays. Is there a way to make it dynamic without specifying a specific type? Sample function useRequest(url: string, method: Method, data: any) { const [response, s ...

Having trouble triggering an alert() after a successful post to the database

As I delve into the realm of backend development, I find myself facing what seems like a simple puzzle that I just can't solve. My goal is to create a basic CRUD app to enhance my skills, so I decided to build a blog platform that could eventually be ...

Combining HTML with multiple .ts files in Angular

I've been dedicating time to enhancing an Angular application, particularly a sophisticated table with intricate styling and functionality. Within my component file, there is a whopping 2k lines of code that includes functions for text formatting, ta ...

Tips for accessing web API within an Angular service

Just starting out with angular and in need of some guidance on how to call my API within the angular code. Can anyone provide assistance? The API I am using is: [HttpGet,Route("api/customer/getCustomer/{name}")] public async Task<IHttpActionResult> ...