NativeScript No provider for Http

Question

Am following the NativeScript Groceries Typescript Angular tutorial and I got stuck in chapter 3 with the following errors.

EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0
ORIGINAL EXCEPTION: No provider for Http!
ORIGINAL STACKTRACE:
Error: DI Exception
at NoProviderError.BaseException [as constructor] (/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/src/facade/exceptions.js:27:23)
at NoProviderError.AbstractProviderError [as constructor] (/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/src/di/reflective_exceptions.js:43:16)
at new NoProviderError (/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/src/di/reflective_exceptions.js:80:16)
at ReflectiveInjector_._throwOrNull (/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/src/di/reflective_injector.js:786:19)
at ReflectiveInjector_._getByKeyDefault (/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/src/di/reflective_injector.js:814:25)
at ReflectiveInjector_._getByKey (/data/data/org.nativescript.groce

I have gone back and forth the tutorial to see if I missed something but it seems I followed every steps diligently.

How do I resolve this issue.

Tetragon

Hi, are you doing the Typescript Angular tutorial or the Javascript tutorial ? Please update your post – Konstanz

Am using the Typescript Angular tutorial. I have updated the post. – Tetragon

What are you passing to Angular's bootstrap? – Elsworth

@Elsworth am doing nativeScriptBootstrap(AppComponent, [NS_HTTP_PROVIDERS]); – Tetragon

Answer 1

Update

If you got here because of the NativeScript Angular2 Typescript tutorial, the next step fixes the problem (at the time of this writing).

Original

Apparently, a step is missing from the tutorial.

I had to add the following 2 lines:

// app.module.ts

import { NativeScriptHttpModule } from "nativescript-angular";

NativeScriptHttpModule

I ended with the following (app.module.ts):

import { NgModule } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptHttpModule } from "nativescript-angular";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Anacoluthon

I accomplished more or less the same thing by importing HttpModule from "@angular/http". Do you know the pros and cons of using one vs. the other? – Reiff

I don't know. I would suspect that the native http module is setup to be the provider for the angular http, so it's probably the same with the dependency injection. But that is just a guess. – Anacoluthon

Thanks. I can't say that I understand the implementation of NativeScriptHttpModule (it appears to be just an empty class) but I assume that it somehow registers NSHttp as injectable. That class strips out any leading "~" or "/" in the URL. Regarding OP's problem (which I also had), it turns out that the tutorial fixes the problem (the way you recommend) in the next exercise. A case of bad tutorial organization, I think. – Reiff

@Ted, That's right the next step did explain everything, I'll indicate that in the answer. – Anacoluthon

@TedHopp yeah the problem is that angular2 and nativescript evolve and tutorials quickly become obsolete. For instance both NS_HTTP_PROVIDERS and its core counterpart are deprecated, which is why the module needs to be loaded now. Also there are some problems using Http with nativescript so this is why they are providing their own implementation... But the issue is to make it transparent for when you need it in both nativescript apps and regular web browsers. – Defazio

I just found out this part of the tutorial isn't missing, is just like two or three paragraphs below, where it says "Exercise: Create an account". Don't know if by the time you create the question this section was there or added before, but now it does explain where to import the Module. – Wines

Answer 2

Good Morning usually this error is caused by not bootstrapping the HTTP_PROVIDER in your application like so:

 import { HTTP_PROVIDERS } from '@angular/http';

 nativeScriptBootstrap(AppComponent, [HTTP_PROVIDERS]);

Hungry

I thought nativescript provides a wrapper around angular's HTTP_PROVIDERS with NS_HTTP_PROVIDERS – Tetragon

In the past, I was simply using the HTTP_PROVIDERS from angular in NativeScript with success. You may want to give it a try and see if it resolves your errors. EDIT: in the example groceries app TJ is using NS_HTTP_PROVIDERS github.com/NativeScript/sample-Groceries/tree/angular-end/app – Hungry

@Tetragon the NS_HTTP_PROVIDERS extends the Http from @angular/http with the addition that it allows to fetch resources from app bundle using Http service directly. See github.com/NativeScript/nativescript-angular/wiki/Http – Dorcy

am using NS_HTTP_PROVIDERS but still get those errors – Tetragon