angular2-jwt: Problems importing providers

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

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 15 (2 by maintainers)

Most upvoted comments

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.

+4
asm4 on Sep 9, 2016

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?

+1
chenkie on Dec 25, 2016
Read more comments on GitHub
← angular2-jwt: No JWT present or has expired after upgrading to Angular4
angular2-jwt: SystemJS js-base64 not found →