use custom service with angular service in another service - angular2

Question

I have two services which one of them(Logger) is going to be used by another(SettingService), I have already searched a lot and see other questions and answers to this problem but no luck, I've already read this document angualr.io/When the service needs a service

here is the code for two services

Logger as a service

@Injectable()
export class Logger {

    public logs: string[] = [];
    //do stuffs
}

SettingService

@Injectable()
export class SettingService
{   
    private url = '/setting';
    private headers = new Headers({ 'content-type': 'application/json' });

    constructor(private http: Http,private logger: Logger) { } //problem is here
    //do stuffs   
}

the settingService is using both http and logger, I have a component app.component which uses settingService, here is my app.component and app.module

app.component.ts

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {

    constructor(private settingService: SettingService) { }
}

app.module.ts

    @NgModule({
  imports:      [ BrowserModule, FormsModule, HttpModule ],
  declarations: [AppComponent],
  providers:    [Logger, SettingService],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

but unfortunately I get the error which says : (SystemJS) Can't resolve all parameters for SettingService: ([object Object], ?).Error: Can't resolve all parameters for SettingService: ([object Object], ?) what is wrong??

this is plunker, that's not working!

@ParidOkht this may sound silly but can you try providing it in appcomponent instead of appmodule once . I know you want services to be singleton but just try once — Rahul Singh
– Rahul Singh, Commented Aug 20, 2017 at 8:49
also if possible can you create a small plunker to demonstarte the issues as the code listed here is fine , there must be something else — Rahul Singh
– Rahul Singh, Commented Aug 20, 2017 at 8:52
@RahulSingh I tried providing it in app.component, no luck — Paridokht
– Paridokht, Commented Aug 20, 2017 at 9:26

Dmitry Shutov · Accepted Answer · 2017-08-20 10:02:29Z

1

Try to change the order of import services into AppModule or try to use forwardRef() in settingService, such as constructor(private http: Http, @Inject(forwardRef(() => Logger)) private logger: Logger)

answered Aug 20, 2017 at 10:02

Dmitry Shutov

967 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paridokht Over a year ago

yes you were right, but I saw your answer late,the problem was about import ordering of my service in app.module.ts, I explained it in one answer. thanks

Rahul Singh · Accepted Answer · 2017-08-20 09:14:38Z

0

One thing you can try is providing the logger in the bootstrap providers like this

bootstrap(AppComponent, [ 
    provide(Logger, {useClass: Logger},
    ....) 
]);

answered Aug 20, 2017 at 9:14

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Comments

Paridokht · Accepted Answer · 2017-08-22 05:04:02Z

the error was ERORR: Can't resolve all parameters for Custom Service: ([object Object], ?)

I am using a index.ts file under services folder to export my services and then I import that index file in app.module.ts, the order of exporting in index.ts which comes to importing in app.module is important. it should be from least dependency to most dependency as my experience please be careful about these bellow thing:

Avoid Circular Dependency
Be Careful about register ordering of services in app.module provider
Be careful about the import ordering of services in app.module.ts, which are dependent to each other, It must be ordered form low dependency to high dependency, otherwise you will get error injecting a service to another service. so, If you are using index.ts and export all your services there and then import index.ts in your app.module.ts you must be careful about the export ordering of your classes in index.ts

Collectives™ on Stack Overflow

use custom service with angular service in another service - angular2

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related