what is the syntax for using multiple providers in component class?

Question

I need to use an additional service in my component. It seems I should be able to do it like so

@Component({
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [firstService, additionalService]
})

but it doesn't work.

Answer 1

Without more code, its hard to understand how you are trying to implement your services. Angular Components consume services through dependency injection in the constructor of the component class, like this:

@Component({
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [firstService, additionalService]
})
export MyClassComponent {
    constructor(private svc1: firstService, private svc2: additionalService} {
    }

    method1() {
        this.svc1.someMethod();
    }
}

An instance of the service will be created every time you register it as a provider. It is a better practice to provide services at a module level of the application, not in the component. Services are created as singletons and then injected wherever they are needed. More information about modules and service providers can be found here in the Angular docs.