Angular2, now in beta, my company decide to work on it a little bit.
I tried to set a request from my service. I browse all the internet, but nothing working. (Maybe posts was written before Beta release).
So, I have my boot.ts like this :
import {bootstrap} from 'angular2/platform/browser';
import {Component, provide} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {BrandsComponent} from './brands/brands.component';
import {BrandsService} from './brands/brands.service';
#Component({
selector: 'my-app',
template: `
<brands></brands>
`,
directives: [BrandsComponent]
})
export class AppComponent {
}
bootstrap(AppComponent, [HTTP_PROVIDERS, BrandsService]);
My BrandsComponent inject my BrandsService.
Here my service code :
import {Http} from 'angular2/http';
import {Injectable, Inject} from 'angular2/core';
#Injectable()
export class BrandsService{
constructor(public http: Http) {
console.log('Task Service created.', http);
http.get('http://google.fr');
}
getBrands(){
//return this.http.get('./brands.json');
return [];
}
}
In my console, I have the 'Task service created' log, but any ajax request is going.
I can't tell you what I've tried, cause I change my code about a billion times.
Thank for your help !
#Edit :
Here my BrandsComponent code :
import {Component} from 'angular2/core';
import {Brand} from './brand.interface';
import {BrandsService} from './brands.service';
import {ModelsComponent} from './../models/models.component';
#Component({
selector: 'brands',
templateUrl: 'templates/brands/list.html',
providers: [BrandsService],
directives: [ModelsComponent]
})
export class BrandsComponent implements OnInit{
public brands;
public selectedBrand : Brand;
constructor(private _brandsService: BrandsService) { }
/*
* Get all brands from brands service
*/
getBrands(){
this.brands = this._brandsService.getBrands();
}
/*
* On component init, get all brands from service
*/
ngOnInit(){
this.getBrands();
}
/*
* Called when li of brand list was clicked
*/
onSelect(brand : Brand){
this.selectedBrand = brand;
}
}
In fact observables are lazy. This means that corresponding HTTP requests aren't sent before attaching some response listeners on them using the subscribe method.
Adding a subscribe method in the constructor of your BrandsService should trigger your HTTP request:
import {Http} from 'angular2/http';
import {Injectable, Inject} from 'angular2/core';
#Injectable()
export class BrandsService{
constructor(public http: Http) {
console.log('Task Service created.', http);
http.get('http://google.fr').subscribe();
}
(...)
}
Hope it helps you,
Thierry
Related
I am getting this error as shown in the screenshot below.
I have studied several similiar questions here. Most common suggestion is 'Add your service to your app module's providers array'. As I am writing web components with Angular elements, I do not actively use the default app component. However, I have added die Injectable property providedIn: root to the services decorator. IMO, this should be equivalent to adding the service to app module's providers array.
Have got no ideas on how to fix this.
Best, Dropbear.
My fetch-job-data.service.ts file:
import { Injectable } from '#angular/core';
import {HttpClient, HttpClientModule} from '#angular/common/http';
import {count} from 'rxjs/operators';
import {Observable} from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class FetchJobDataService {
constructor(private _http: HttpClient) { }
getJobCount(jobCountUrl: string): Observable<{'count': number}> {
return this._http.get<{'count': number}>(jobCountUrl);
}
}
My jobcounter.component.js file:
import {Component, OnDestroy, OnInit} from '#angular/core';
import {FetchJobDataService} from '../../services/fetch-job-data.service';
import {takeUntil} from 'rxjs/operators';
import {Subject} from 'rxjs';
#Component({
templateUrl: './jobcounter.component.html',
styleUrls: ['./jobcounter.component.scss']
})
export class JobcounterComponent implements OnInit, OnDestroy {
public jobCount: {'count': number};
public jobDataUrl = 'assets/data/jobCount.json';
private complete$ = new Subject<void>();
constructor(private _fetchDataService: FetchJobDataService) {
console.log('Job counter initialized...');
}
ngOnInit() {
this._fetchDataService.getJobCount(this.jobDataUrl)
.pipe(
takeUntil(this.complete$)
)
.subscribe(
(jobCount) => {
this.jobCount = jobCount;
console.log('Job count: ' + jobCount);
}
);
}
ngOnDestroy() {
this.complete$.next();
this.complete$.complete();
}
}
Browser Console error message
Import HttpClientModule in app.module
Like this:
import { HttpClientModule } from '#angular/common/http';
#NgModule({
imports: [
...
HttpClientModule,
],
declarations: [
]
})
I tried everything and I cannot get an http request to go out to my node server on heroku. I can hit the route manually so its not the server. I will paste my service and my page.
**Class is subscription.service.ts
import {Http, Response} from '#angular/http'
import {Injectable} from '#angular/core'
import 'rxjs/add/operator/map';
#Injectable()
export class SubscriptionService {
http:Http;
constructor(http:Http){
this.http = http;
}
getEntries() {
return this.http.get('my url here *****').map(res => res.json());
}
}
**Class is dashboard.component.ts
import {Component, ViewEncapsulation} from '#angular/core';
import {SubscriptionService} from '../../_services/subscription.service';
import 'rxjs/Rx';
#Component({
selector: 'dashboard',
providers: [SubscriptionService],
encapsulation: ViewEncapsulation.None,
styles: [require('./dashboard.scss')],
template: require('./dashboard.html')
})
export class Dashboard {
getData: string;
constructor(private subscriptionService: SubscriptionService) {
}
ngOnInit() {
console.log("test!!");
this.subscriptionService.getEntries()
.subscribe(data => this.getData = JSON.stringify(data),
error => console.log("Error!"),
() => console.log("finished!")
);
}
}
My ngOnInit() is being called, I see the console print, but no request shows up in logs on heroku. Also no errors show up in console.
Make sure you have imported the HttpModule in root.
I don't see anything else which can cause this. For make sure http is working you can put a break point in SubscriptionService on getEntries method and follow where it leads you.
Update:- as pointed out by #peeskillet there is nothing wrong with your dependency. try to debug and update your question with more information.
Screenshot of error:
Code where error exists:
import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HeroesComponent} from './heroes.component';
import {HeroDetailComponent} from './hero-detail.component';
import {DashboardComponent} from './dashboard.component';
import {SpreadSheetComponent} from './spreadsheeteditall.component';
import {SwitchUsersComponent} from './SwitchUsers.component';
import {BiddingPageComponent} from './BiddingPage.component';
import { Injectable } from 'angular2/core';
import { Jsonp, URLSearchParams } from 'angular2/http';
#Component({
selector: 'SearchAndDisplayComponent',
templateUrl: 'app/SearchDisplay.component.html',
styleUrls: ['app/SearchDisplay.component.css'],
providers: [HeroService],
directives: [ROUTER_DIRECTIVES]
})
#Injectable()
export class SearchAndDisplayComponent{
constructor(private jsonp: JSON) {}
search (term: string) {
// let ebayURL = 'http://en.wikipedia.org/w/api.php';
var params = new URLSearchParams();
params.set('search', term); // the user's search value
params.set('action', 'opensearch');
params.set('format', 'json');
params.set('callback', 'JSONP_CALLBACK');
// TODO: Add error handling
return this.jsonp
.get({ search: params })
.map(request => <string[]> request.json()[1]);
}
}
Context of the problem:
I am trying to create a search bar for a website that is basically a clone of ebay.
Here is a question I posted earlier with links to the whole project (plunker/full project zipped)
Search bar that hides results that aren't typed into it
HTML code of how I'm trying to display it by the click of a button next to the search bar:
<button (click)="search(term)">Search</button>
You need to inject the Jsonp class instead of the JSON one in the constructor. The Jsonp object will allow you to execute JSONP requests.
import {Jsonp} from 'angular2/http';
(...)
export class SearchAndDisplayComponent{
constructor(private jsonp: Jsonp) {} // <-----
(...)
}
JSON is javascript namespace object. You have imported Jsonp from the module angular2/http, so in constructor of yout service change JSON to Jsonp. And don't forget to add Jsonp provider to some component above at component hierarchy.
I have created one global service in angular2 for accessing variables across all components like below.
global.objects.service.ts
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
export class GlobalObjectsService {
workspace:any;
constructor() {
}
}
Then I am able to access & set new value to this object in my workspace.component like below:
import {Component, OnInit,Input} from 'angular2/core';
import { GlobalService} from './../../../app/shared/services/global/global.service';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
import { WorkspaceService } from './../../../app/shared/services/pm/workspaces.service';
#Component({
selector: 'workspaces',
providers:[WorkspaceService],
templateUrl: 'app/project-manager/workspaces/workspaces.component.html'
})
export class WorkspacesComponent implements OnInit {
#Input() workspaces:any;
constructor(private globalService:GlobalService,private globalObjectsService:GlobalObjectsService,private workspaceService:WorkspaceService) { }
ngOnInit() { }
selectWorkspace(workspace_id:string){
this.workspaceService.getWorkspaceById(workspace_id,this.globalService.baseUrl).subscribe((workspace)=>{
this.globalObjectsService.workspace=workspace;
console.log(this.globalObjectsService.workspace); //this prints workspace correctly
});
}
}
But when I am trying to access this global Object in below component its showing undefined
import {Component, OnInit ,Input} from 'angular2/core';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
#Component({
selector: 'pages',
templateUrl: 'app/project-manager/pages/pages.component.html'
})
export class PagesComponent implements OnInit {
#Input() pages:any;
public workspace:any;
constructor(private globalObjectsService:GlobalObjectsService) {
this.workspace=this.globalObjectsService.workspace;
console.log(this.workspace); //this is not working
}
ngOnInit() { }
}
I have not included global.objects.service in providers of any component except the root component while bootstrapping.
any suggestions?
Your service is missing the #Injectable() directive. Just add it like this:
import {Injectable} from 'angular/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
#Injectable()
export class GlobalObjectsService {
workspace:any;
constructor() {
}
}
Read more on dependency injection in Angular 2 here.
It seems what you are missing is to inject a WorkspaceService into GlobalObjectsService
#Injectable()
export class GlobalObjectsService {
constructor(public workspace:WorkspaceService) {
}
}
You need to provide WorkspaceService like GlobalObjectsService. A global GlobalObjectsService can't have a more local WorkspaceService injected depending on where you inject GlobalObjectsService
I am using Angular 2 for my web application. Now I am trying to populate a checkbox list from backend service call. This is what I am trying.
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {DataService} from './service'
import {AppComponent} from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS,HTTP_PROVIDERS,DataService]);
service.ts
import {Http, Response} from 'angular2/http'
import {Injectable} from 'angular2/core'
#Injectable()
export class DataService {
http: Http;
constructor(http: Http) {
this.http = http;
}
getCheckboxList() {
return this.http.get('http://localhost:8080/test/getList').map((res: Response) => res.json());
}
}
checkbox.ts
import {Component} from 'angular2/core';
import {DataService} from '../service';
#Component({
templateUrl: 'views/checkboxlist.html'
})
export class CheckboxComponent {
message = "hello";
constructor(dataService: DataService) {
dataService.getCheckboxList().subscribe(function(res) {
console.log(res.result);
this.list = res.result;
console.log(this.list);
})
}
}
checkboxlist.html
<div>
<label *ngFor="#item of list">
<input type="checkbox">{{item.value}}
</label>
</div>
Backend service is successful and returns a response and line console.log(this.list); prints an object array (HTTP response). Although, it doesn't display the checkbox list and there is not any error on the console log.
Does anyone have any idea what's wrong with my code?
Thank You
You should use an arrow function in your component to be able to use the lexical this. In this case, the this keyword will correspond to the instance of the component. In your case, you use a "normal" function and the this keyword used in it doesn't correspond to the component instance...
dataService.getCheckboxList().subscribe((res) => { // <--------
console.log(res.result);
this.list = res.result;
console.log(this.list);
})
See this plunkr: https://plnkr.co/edit/r1kQXlBVYvuO5fvQJgcb?p=preview.
See this link for more details:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
I would expect an error message in the browser console
Try the safe-navigation ?.
<input type="checkbox">{{item?.value}}