CODEWITHSUNDEEP
angular
Paul Cavacas
Paul Cavacas

Reputation: 4454

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

Upvotes: 0

Views: 184

Answers (1)

Abiezer
Abiezer

Reputation: 782

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

Upvotes: 2

Related Questions