Angular2 creating and using Services

Question

I'm trying out Angular2 for the first time and am having some problems creating a service. Actually in using that services. I have created the following data service

import {Injectable} from 'angular2/core';
import {recentActivity} from './app/components/recentActivity/model'

@Injectable()
export class RecentActivityDataService {

    loadList() {
        const items: Array<recentActivity> = [];
        items.push({
            url: 'From Service',
            name: 'From Service'
        });

        return items;
    }

}

Then in a component I have the following:

import {Component, OnInit} from 'angular2/core';
import {recentActivity} from './model';
import {RecentActivityDataService} from './dataService';

@Component({
    selector: 'recentActivity',
    templateUrl: './app/components/recentActivity/recentActivity.html',
    providers: [RecentActivityDataService]
})
export class RecentActivity implements OnInit {

    items: Array<recentActivity> = [];

    constructor(private dataService: RecentActivityDataService) {

    }

    ngOnInit() {
        this.items = this.dataService.loadList();
    }

}

When I pull up this component I'm getting the following error message

"Uncaught (in promise): Cannot resolve all parameters for 'RecentActivity'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RecentActivity' is decorated with Injectable."

I don't know what I'm missing here since my service has the @Injectable on it and in my component I have it listed as a provider. But in the constructor it is still failing saying it cannot resolve this.

In app.Component I have the following

import {Component} from 'angular2/core';
import {StandardNavigation} from './navigation/standard';
import {RecentActivity} from './components/recentActivity/recentActivity';

@Component({
    selector: 'cranalytics',
    templateUrl: './app/main.html',
    directives: [StandardNavigation, RecentActivity]
})
export class AppComponent {

}

I have tried the following changes. In my Main I'm bootstrapping AppComponent: bootstrap(AppComponent);

In AppComponent I have put the service as a provider there

import {Component} from 'angular2/core';
import {StandardNavigation} from './navigation/standard';
import {RecentActivity} from './components/recentActivity/recentActivity';
import {RecentActivityDataService} from './components/recentActivity/dataService';

@Component({
    selector: 'cranalytics',
    templateUrl: './app/main.html',
    directives: [StandardNavigation, RecentActivity],
    providers: [RecentActivityDataService]
})
export class AppComponent {

}

In Recent Activity I have imported the Data Service

import {Component, OnInit, Inject, forwardRef} from 'angular2/core';
import {recentActivity} from './model';
import {RecentActivityDataService} from './dataService';

@Component({
    selector: 'recentActivity',
    templateUrl: './app/components/recentActivity/recentActivity.html',
})
export class RecentActivity implements OnInit {

    items: Array<recentActivity> = [];

    constructor(  private dataService: RecentActivityDataService) {

    }

    ngOnInit() {
        this.items = this.dataService.loadList();
    }

}

But that gives me the same error message

There is no class requesting RecentActivity. The error comes from somewhere else. Where do you have a constructor parameter of type RecentActivity? — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 13, 2016 at 19:37
What happens if you bootstrap the service instead of providing it on the component? — Jack Guy
– Jack Guy, Commented Apr 13, 2016 at 19:39
In App.Component I added the import line and the providers line and removed them from the RecentActivity component and I get the same error. — Paul Cavacas
– Paul Cavacas, Commented Apr 13, 2016 at 19:51
The only way that I can get it to work is if (using the original implementation listed in the question) is if I add @Inject(forwardRef(() => RecentActivityDataService)) before the parameter in the constructor, but I shouldn't have to do this based on what I have read — Paul Cavacas
– Paul Cavacas, Commented Apr 13, 2016 at 19:52
or reorder your classes in your source file or move each class to its own file — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 14, 2016 at 3:25

Abiezer · Accepted Answer · 2016-04-14 04:42:54Z

2

try to put recentActivity dependency in the bootstrap() so all the services can access it without import everywhere.

answered Apr 14, 2016 at 4:42

Abiezer

7828 silver badges15 bronze badges

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

1 Comment

Günter Zöchbauer Over a year ago

Even if they are listed in bootstrap() you still need to import the classes if you use the types. Importing and providing are mostly unrelated concepts. The former is to register the type in DI, the later is to make types you use in your code known to static code checker (linter) and to use them as keys for DI which still requires them to be imported.

Collectives™ on Stack Overflow

Angular2 creating and using Services

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related