Angular2-jwt: Problems importing providers

[20pedro99]

i have two questions

First: Where HTTP_PROVIDERS and AUTH_PROVIDERS should be included? It is in main.ts bootstarp, app.module bootstrap or app.module providers?
Second: my http library no has HTTP_PROVIDERS, what can i do?

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
export { BrowserXhr } from './backends/browser_xhr';
export { JSONPBackend, JSONPConnection } from './backends/jsonp_backend';
export { CookieXSRFStrategy, XHRBackend, XHRConnection } from './backends/xhr_backend';
export { BaseRequestOptions, RequestOptions } from './base_request_options';
export { BaseResponseOptions, ResponseOptions } from './base_response_options';
export { ReadyState, RequestMethod, ResponseContentType, ResponseType } from './enums';
export { Headers } from './headers';
export { Http, Jsonp } from './http';
export { HttpModule, JsonpModule } from './http_module';
export { Connection, ConnectionBackend, XSRFStrategy } from './interfaces';
export { Request } from './static_request';
export { Response } from './static_response';
export { QueryEncoder, URLSearchParams } from './url_search_params';
//# sourceMappingURL=index.js.map

The second question led me to add http provider app.module providers because the below error is obtained

"EXCEPTION: Uncaught (in promise): Error: Error in ./IndexComponent class IndexComponent_Host - inline template:0:0 caused by: No provider for Http!"

After add http provider to app.module providers, the below error was obtained

EXCEPTION: Uncaught (in promise): Error: Error in ./IndexComponent class IndexComponent_Host - inline template:0:0 caused by: No provider for ConnectionBackend!"

What is the next step?

My code ...

package.json

"dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.6",
    "angular2-in-memory-web-api": "0.0.18",
    "angular2-jwt": "^0.1.21",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.17"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",
    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.7.4",
    "lodash": "^4.11.1",
    "jasmine-core": "~2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.2"
  },

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import {Http} from '@angular/http';
import { AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth } from 'angular2-jwt';

import { AppComponent }   from './app.component';
import { IndexComponent } from './Components/Index/index.component';
import { AuthService }   from './Services/auth.service';

import { routing } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    routing,
  ],
  declarations: [
    AppComponent,
    IndexComponent,
  ],
  providers: [
    AuthService,
    Http,
    AuthHttp,
    provideAuth({
        headerName: 'Authorization',
        headerPrefix: 'bearer',
        tokenName: 'token',
        tokenGetter: (() => localStorage.getItem(this.tokenName)),
        globalHeaders: [{ 'Content-Type': 'application/json' }],
        noJwtError: true
    })
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

index.component.ts

import { Component, OnInit} from '@angular/core';
import { AuthService }      from './../../Services/auth.service';

@Component({
    selector: 'index',
    templateUrl: './app/Components/Index/index.component.html'
})

export class IndexComponent implements OnInit{

  constructor(
    private authService: AuthService
  ){}

  ngOnInit(): void {
    //...
  }
}

auth.service.ts

import { Component, OnInit} from '@angular/core';
import { AuthService }      from './../../Services/auth.service';

@Component({
    selector: 'index',
    templateUrl: './app/Components/Index/index.component.html'
})

export class IndexComponent implements OnInit{

  constructor(
    private authService: AuthService
  ){}

  ngOnInit(): void {
    //...
  }
}

I'm new with all this and I will be grateful for any help
an application with all methods would be great

[asm4]

With angular rc5 and 6 they changed the way the providers work. Your issue is in your app.module.ts imports section you need to include HttpModule.

[20pedro99]

thanks

[squarewave24]

same issue after upgrading to final. my main module is importing HttpModule but still getting:

_Host - inline template:0:0 caused by: No provider for ConnectionBackend!

my module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-ng2/main';
import { HttpModule } from '@angular/http';


import { ProductListComponent } from './productlist.component';
@NgModule({
    imports: [BrowserModule
            , AgGridModule.forRoot()
            , HttpModule
    ],
    declarations: [ProductListComponent],
    bootstrap: [ProductListComponent]
})
export class ProductModule { }

[samarthagarwal]

I am facing the same issue. Using Ionic 2 RC0 and getting this error.

[danciela]

Try this:

`import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, JsonpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { routing,
appRoutingProviders } from './app.routing';

@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
routing
],
declarations: [
AppComponent
],
providers: [
appRoutingProviders
],
bootstrap: [ AppComponent ]
})

export class AppModule { }`

[fergalmoran]

I'm having the same error - importing HttpModule & JsonpModule hasn't helped?

[davidmartinezros]

I'm having the same error - importing HttpModule and injecting in InMemoryDbService implementation:

Here is the example:

@Injectable()
**export class InMemoryDataService implements InMemoryDbService {**

  http: Http;

  constructor(@SkipSelf() @Inject(forwardRef(() => Http)) http) {
      console.log("constructor");
      //this.http = http;
      Promise.resolve(http).then(http => this.http  = http);
      //console.log("InMemoryDataService.http:" + this.http);

      //this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }

  createDb() {
    console.log('createDb');
    let projects = this.http.get('./assets/data/projects.json')
          // ...and calling .json() on the response to return data
          .map((res:Response) => res.json())
          //...errors if any
          .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
    return {projects};
  }
}

And the app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    ProjectDetailComponent,
    ProjectsComponent,
    ProjectSearchComponent,
    ProjectPipeFilterPipe,
    ProjectComponent,
    ProjectListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 100 }),
    AppRoutingModule,
  ],
  providers: [
    ProjectService,
    ProjectSearchService,
  ],
  bootstrap: [
    AppComponent
  ]
})

**export class AppModule { }**

Any idea what can I change to work?

Thanks in advanced!

David

[bofcarbon1]

This is nuts. An http API call in Angular 1 was so straight forward. This craziness in Angular 2 to call a simple API through a URL is for the birds. I can create my API in Express and access it in Fiddler 4 without a problem. I've tried a few examples and just run into http provider errors. Can't find a tutorial that works even from the people that created this language.

[chenkie]

What errors are you getting @bofcarbon1 ?

[bofcarbon1]

browser_adapter.ts:82EXCEPTION: Error in ./WebResumeApp class WebResumeApp_Host - inline template:0:0
BrowserDomAdapter.logError @ browser_adapter.ts:82
BrowserDomAdapter.logGroup @ browser_adapter.ts:93
ExceptionHandler.call @ exception_handler.ts:58
(anonymous) @ application_ref.ts:417
ZoneDelegate.invoke @ zone.js:232
onInvoke @ ng_zone_impl.ts:72
ZoneDelegate.invoke @ zone.js:231
Zone.run @ zone.js:114
NgZoneImpl.runInner @ ng_zone_impl.ts:104
NgZone.run @ ng_zone.ts:219
ApplicationRef_.run @ application_ref.ts:405
ApplicationRef_.bootstrap @ application_ref.ts:429
(anonymous) @ application_ref.ts:169
ZoneDelegate.invoke @ zone.js:232
onInvoke @ ng_zone_impl.ts:72
ZoneDelegate.invoke @ zone.js:231
Zone.run @ zone.js:114
(anonymous) @ zone.js:502
ZoneDelegate.invokeTask @ zone.js:265
onInvokeTask @ ng_zone_impl.ts:61
ZoneDelegate.invokeTask @ zone.js:264
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
browser_adapter.ts:82ORIGINAL EXCEPTION: No provider for Http!

......................................

And here is my confusion.....

In Angular 1 I could call an API that sent an http request (GET) and store the results in scope.
No observable or template needed just return a JSON array and I decide what I want to do with it later.

Now I see HTTP, HTTP Response, HTTP_Module and I don't know what to use. The examples all seem to use an observable. I am not listening or reacting to an html control change. I want to initialize my page load data but get that data from an API.

My API

// Get resume personal data
app.get("/api/resume/personal", function(req, res, next) {
db.collection("wr_personal").find({}, function(err, docs) {
if(err) return next(err);
docs.each(function(err, doc) {
if(err) {
res.json(err);
console.log("Error:",err);
}
if(doc) {
res.json(doc);
//console.log(doc);
}
else {
res.end();
}
});
});
});

and my attempt so far in Angular 2 (as a Service that a component class can use to get data)

import {
Injectable
} from '@angular/core';
import { Http, Response } from '@angular/http';

@Injectable()
export class WRService {
constructor(public http: Http) {
//this.tabTitle = "Web Development";
}

// Get web resume personal info
getPersonal() {

    return this.http
    .get('https://expressapis-bofcarbon1.c9users.io:8082/api/resume/personal')
    .map(this.extractData);
}

private extractData(res: Response) {
let body = res.json();
return body.data || { };
}

}

This is my first attempt at doing an HTTP API call in Angular 2 and it is confusing.

[bofcarbon1]

I am sure that I will make progress but I wish I was seeing consistent examples.

[chenkie]

It sounds like the issue is with the template you are using for your component. Can you paste the markup you're using for your template?

HTTP calls in Angular 2 return observables. Love it or hate it, observables offer a huge range of benefits over promises. There's a steep learning curve when approaching observables for the first time, but once you get the hang of them, you'll see their usefulness.

We can simplify your example somewhat:

// wrService.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map'

@Injectable()
export class WRService {
  constructor(public http: Http) {}

  // Get web resume personal info
  getPersonal() {
    return this.http
      .get('https://expressapis-bofcarbon1.c9users.io:8082/api/resume/personal')
      .map(res => res.json());
  }

// wrComponent.ts

import { OnInit } from '@angular/core';
import { WRService } from 'path/to/your/WRService';

// ...

export class wrComponent implements OnInit {

  personal: Array<any>;

  constructor(private: wrService: WRService) {}

  ngOnInit() {
    wrService.getPersonal().subscribe(data => this.personal = data);
  }
}

Now you can use the personal data in your template.

You also have the option of turning the returned observable into a promise if you wish. Doing so will mean that you lose the benefits of working with observables, but it does allow you to work in a way that is more familiar. You could do something like this:

// wrService.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class WRService {
  constructor(public http: Http) {}

  // Get web resume personal info
  getPersonal() {
    return this.http
      .get('https://expressapis-bofcarbon1.c9users.io:8082/api/resume/personal')
      .toPromise();
  }

// wrComponent.ts

import { OnInit } from '@angular/core';
import { WRService } from 'path/to/your/WRService';

// ...

export class wrComponent implements OnInit {

  personal: Array<any>;

  constructor(private: wrService: WRService) {}

  ngOnInit() {
    wrService.getPersonal().then(data => this.personal = data);
  }
}

It sounds like the issue you're posting about relates to Angular 2's HTTP implementation in general. Is there a problem which is specific to angular2-jwt?

[bofcarbon1]

Update.....

I was able to get beyond the 'No provider for Http' error. First off I think I figured out that 'HttpModule' is an alternative to importing 'Http .... etc... ' individual http modules needed to do http.

Changed the app.ts component ....

import { Http, Response, RequestOptions, HTTP_PROVIDERS, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';

@Component({
selector: 'webresume-app',
templateUrl: './app.html',
providers: [WRService, HTTP_PROVIDERS],
directives: [WebResumeSkill, WebResumeService]
})

Now I was not able to use 'HttpModule' which is probably in the @angluarl/http to import if you configure things correctly. This exercise is being done from an ebook and I cloned the app from Github and it used an 'Angular Seed' project. So if my guess is right the angular seed was not updated to include 'HttpModule'.

Now I have to resolve the following

XMLHttpRequest cannot load https://expressapis-bofcarbon1.c9users.io:8082/api/resume/personal. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://switchingtoangular2x-bofcarbon1.c9users.io:8081' is therefore not allowed access.

But having worked with APIs in ASP.NET Web API I know what this cross domain browser issue is all about. I'll go looking for some domain permission statements on the API side in Express.

[bofcarbon1]

Update......

All working now.

Just added this to server.js of my Express API app which resolved headers and cross domain issues.

// Add headers
app.use(function (req, res, next) {

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

// Pass to next layer of middleware
next();

});

[vandanavishnu]

hi plz help me

import { Component } from '@angular/core';
@Component({
selector:'pm-products',
templateUrl: 'app/products/product-list.component.html'

})
export class ProductListComponent {
}

im not getting output
it's showing the error:

ERROR in ./src/app/products/product-list.component.ts
Module not found: Error: Can't resolve './app/products/product-list.component.html' in '/home/dileep/ANGULAR VANDANA/cart/src/app/products'
@ ./src/app/products/product-list.component.ts 17:22-75
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.