Angular2 creating and using Services

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

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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