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
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: [
]
})
In my app, I want to open a modal popup for user to upload a file. So I used below code for it (Used angular material to open the popup):
Actual service call happens after I upload document and if uploaded wrong document then service respond with error message.
What I want to achieve is If user select incorrect document I want to show another popup (Error Modal popup).
However when I import dialog.service.ts in uploaddoc.component.ts gives me below error
Can't resolve all parameters for UploaddocComponent
also throws warning in console saying :
WARNING in Circular dependency detected:
src\app\dialog.service.ts ->
src\app\uploaddoc\uploaddoc.component.ts ->
src\app\dialog-service.service.ts
WARNING in Circular dependency detected:
src\app\uploaddoc\uploaddoc.component.ts ->
src\app\dialog.service.ts ->
src\app\uploaddoc\uploaddoc.component.ts
Note : UploaddocComponent and ErrorModalComponents are both added in entryComponents array in app.module.ts as both are dynamic components.
Below is my code (and reproduced in stackblitz)
Main Component(to open upload popup ):
HTML
<button type="button" (click)="openUpload()">Open Upload Popup</button>
Component.ts
import { Component } from '#angular/core';
import { MatDialog } from '#angular/material';
import { DialogService } from './dialog.service';
import { ErrorModalComponent } from './error-modal/error-modal.component';
import { UploaddocComponent } from './uploaddoc/uploaddoc.component';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 5';
constructor(public dialog: MatDialog,private dialogsService: DialogService){
}
public openUpload(){
this.dialogsService.openUploadDialog(UploaddocComponent);
}
}
My dialog.service.ts
import { Injectable } from '#angular/core';
import { ErrorModalComponent } from './error-modal/error-modal.component';
import { UploaddocComponent } from './uploaddoc/uploaddoc.component';
import { MatDialogRef, MatDialog, MatDialogConfig } from '#angular/material';
import { Observable } from 'rxjs/Observable';
#Injectable()
export class DialogService {
constructor(private dialog: MatDialog) { }
public infoPopup(): Observable<boolean> {
let dialogRef: MatDialogRef<ErrorModalComponent>;
dialogRef = this.dialog.open(ErrorModalComponent);
dialogRef.componentInstance.data = "error";
return dialogRef.afterClosed();
}
public openUploadDialog(data: Object): Observable<boolean> {
let dialogRef: MatDialogRef<UploaddocComponent>;
dialogRef = this.dialog.open(UploaddocComponent);
dialogRef.componentInstance.data = data;
return dialogRef.afterClosed();
}
}
upload.component.ts
import { Component, OnInit } from '#angular/core';
import { Observable } from 'rxjs/Observable';
import { delay } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { DialogService } from '../dialog.service';
import { ErrorModalComponent } from '../error-modal/error-modal.component';
#Component({
selector: 'app-uploaddoc',
templateUrl: './uploaddoc.component.html',
styleUrls: ['./uploaddoc.component.css']
})
export class UploaddocComponent implements OnInit {
constructor(public dialogService: DialogService) { }
data: any;
ngOnInit() {
}
public uploadDoc() {
//in this method actual service call happens and check if correct document is uploaded or not.
// Service side sends error if wrong document is uploaded.
// If wrong doc is uploaded then I want to display Error component here
// I will simulate service call here with delay and will open ErrorModal
of(['some data']).pipe(
delay(2000)
).subscribe((res)=>{
console.log(res);
// suppose error occured here then I want to open error modal So I added `dialog.service.ts` here in this component
this.dialogService.infoPopup();
})
}
}
upload.component.html
<p>
Upload popup works
<button type="button" (click)="uploadDoc()">Do upload</button>
</p>
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { Components } from './materialComponents';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { DialogService } from './dialog.service';
import { UploaddocComponent } from './uploaddoc/uploaddoc.component';
import { ErrorModalComponent } from './error-modal/error-modal.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [BrowserModule, FormsModule, ...Components,BrowserAnimationsModule],
declarations: [AppComponent, HelloComponent, UploaddocComponent, ErrorModalComponent],
bootstrap: [AppComponent],
entryComponents: [UploaddocComponent, ErrorModalComponent],
providers: [DialogService]
})
export class AppModule { }
I am not sure How should I handle circular dependency.
I may not have understood ngModule completely but guessing; Not able to inject service in components added in entryComponents array in app.module.ts.
What I am doing wrong here?
Well I tried below approach:
Modified uploaddoc.component.ts to :
import { Component, OnInit, Injector } from '#angular/core';
import { Observable } from 'rxjs/Observable';
import { delay } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { DialogService } from '../dialog.service';
import { ErrorModalComponent } from '../error-modal/error-modal.component';
#Component({
selector: 'app-uploaddoc',
templateUrl: './uploaddoc.component.html',
styleUrls: ['./uploaddoc.component.css']
})
export class UploaddocComponent implements OnInit {
constructor(private injector: Injector) {
this.dialogsService = this.injector.get(DialogsService);
}
data: any;
ngOnInit() {
}
public uploadDoc() {
of(['some data']).pipe(
delay(2000)
).subscribe((res)=>{
console.log(res);
// suppose error occured here then I want to open error modal So I added `dialog.service.ts` here in this component
this.dialogService.infoPopup();
})
}
}
I have used injector from #angular/core to explicitly get the service instance and no more error now.
however I can still see warnings. To remove warning I have added following in .angular-cli.json
"defaults": {
....
"build": {
"showCircularDependencies": false
}
}
I'm trying to pass a variable that is set on a component, to the parent component via a getter/setter in a service. The setter is applied correctly, but the getter returns undefined.
The below code was pulled out of another project I work on that does just fine with this code so I'm not sure why it isn't working here.
I simply just need to pass the pageTitle that is set on the child component, pass it to the parent component to display in its HTML.
Parent Component
TS: styleguide.component.ts
import { Component } from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
import { StyleguideService } from './styleguide.service';
#Component({
selector: 'styleguide',
templateUrl: './styleguide.component.html',
host: {'class': 'route'},
})
export class StyleguideComponent {
constructor( private ss: StyleguideService ) {}
}
Relevant HTML: styleguide.component.html
<a [routerLink]="[]" aria-current="page" class="crumbs__link crumbs__link--active" [title]="ss.pageTitle">{{ss.pageTitle}}</a>
Parent Module: styleguide.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { StyleguideService } from './styleguide.service';
import { StyleguideComponent } from './styleguide.component';
import { TemplatesComponent } from './templates/templates.component';
...
#NgModule({
imports: [
CommonModule,
FormsModule,
...
],
declarations: [
StyleguideComponent,
TemplatesComponent,
...
],
exports: [
...
],
providers: [
StyleguideService
]
})
export class StyleguideModule {}
Service: styleguide.service.ts
import { Injectable } from '#angular/core';
#Injectable()
export class StyleguideService {
pageTitleS: string;
get pageTitle(): string {
console.log('get title: ', this.pageTitleS); // <-- Returns undefined
return this.pageTitleS;
}
set pageTitle(s: string) {
console.log('set title: ', s);
this.pageTitleS= s;
}
}
Child Component: templates.component.ts
import { Component } from '#angular/core';
import { StyleguideService } from '../styleguide.service';
#Component({
selector: 'templates',
templateUrl: './templates.component.html',
host: {'class': 'route__content'}
})
export class TemplatesComponent {
constructor( private ss: StyleguideService ) {
this.ss.pageTitle = "Templates";
}
}
You should implement the Service with Observables. A quick example would be something like this:
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Injectable} from '#angular/core'
#Injectable()
export class Service {
private value: BehaviorSubject<string>;
constructor() {
this.value = <BehaviorSubject<string>>new BehaviorSubject();
}
setValue(value=""){
this.value.next(value);
}
getValue() {
return this.value.asObservable();
}
}
The Parent Component would subscribe to it like so:
import {Component, OnInit} from '#angular/core'
import { Service } from './service';
#Component({
selector: 'parent-component',
template: `
<div>
<h2>Value {{value}}</h2>
<child-component></child-component>
</div>
`,
})
export class ParentComponent implements OnInit {
value:string;
constructor(private service: Service) {
}
ngOnInit(){
this.service.getValue().subscribe((newValue)=>{
this.value = newValue;
})
}
}
And the Child Component would set the value and also subscribe to it like so:
import {Component, OnInit} from '#angular/core'
import { Service } from './service';
#Component({
selector: 'child-component',
template: `
<div>
<h2>Child Value {{value}}</h2>
</div>
`,
})
export class ChildComponent implements OnInit {
value:string;
constructor(private service: Service) {
this.service.setValue('New Value');
}
ngOnInit(){
this.service.getValue().subscribe((newValue)=>{
this.value = newValue;
})
}
}
Your setter is never called. You instantiate the service using StyleguideComponent, not the TemplatesComponent which does call the setter, and the constructor of StyleguideComponent does not call the setter on the service which is why the value remains undefined.
The TemplatesComponent has an element selector templates which I do not see in the styleguide.component.html you have in the question which is why I believe TemplatesComponent is never being created.
You are not calling the setter function in your child.component.ts instead you are setting the value of variable but I think you are accessing it wrongly as you are missing the last S in the variable name. You should be doing
export class TemplatesComponent {
constructor( private ss: StyleguideService ) {
this.ss.pageTitle("Templates");
// Now to get it you should call
this.ss.pageTitle(); // Should console.log the value
}
}
Okay so it was related to my routing setup, I didn't have my child routes setup correctly so this really had nothing to do with the getter/setter after all.
I recently ran into a problem and can't really figure out what's wrong with my code at this point, hopefully someone of you can help me.
All I am trying to do is changing the value of my BehaviorSubject with a function but it isn't working out.
chat.service.ts
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
#Injectable()
export class ChatService {
chatId = new BehaviorSubject<number>(0);
constructor() {
this.chatId.next(1);
}
changeChatId(chatId: number) {
console.log(chatId);
this.chatId.next(chatId);
}
}
So the subscribers get the default as well as the changed chatId from the constructor. But as soon as I try to change it with the changeChatId function nothing happens at all. The right id's get passed into the function I already debugged that but the line this.chatId.next(chatId) doesn't seem to do anything.
ADD
These are the other components the service is currently used in.
chat-message-list
import { Component, OnInit, Input} from '#angular/core';
import { ChatService } from "../../../shared/services/chat.service";
#Component({
selector: 'app-chat-message-list',
templateUrl: './chat-message-list.component.html',
styleUrls: ['./chat-message-list.component.css'],
providers: [ChatService]
})
export class ChatMessageListComponent implements OnInit {
chatId: number;
constructor(private chat: ChatService) { }
ngOnInit() {
this.chat.chatId.subscribe(
chatId => this.updateMessageList(chatId)
);
}
}
chat-item
import { Component, OnInit, Input} from '#angular/core';
import { User } from '../../../shared/models/user.model';
import { ChatService } from '../../../shared/services/chat.service';
#Component({
selector: 'app-chat-list-item',
templateUrl: './chat-list-item.component.html',
styleUrls: ['./chat-list-item.component.css'],
providers: [ChatService]
})
export class ChatListItemComponent implements OnInit {
#Input()
user: User;
constructor(private chat: ChatService) { }
ngOnInit() {
}
onChatItemSelected(){
this.chat.changeChatId(this.user.id);
}
}
You need to make your ChatService a singleton (shared) service. Add it to the providers of your ngModule. This allows all the components that use the ChatService to share the same service instance.
#NgModule({
providers: [ChatService]
})
And remove it from your components providers. When you are adding it to your components providers, that component gets its own instance of ChatService which can not be used by other components.
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