CODEWITHSUNDEEP
javascriptserviceangularinject
George Hulpoi
George Hulpoi

Reputation: 667

Angular2: Injecting a service

I started to learn Angular2, but.. I tried to create a service and import in my compoment, but I get this error:

error TS2339: Property 'commentService' does not exist on type 'CommentsComponent'.

comment.service.ts

import { Injectable } from '@angular/core';


@Injectable()
export class CommentService {
    testfunction() {
        return 'valoare';
    }
}

comments.component.ts

import { Component, OnInit } from '@angular/core';
import { CommentService } from '../services/comment.service';

@Component({
  template: 'dadada',
  providers: [CommentService]
})

export class CommentsComponent implements OnInit {
    construct(commentService: CommentService) {
    }

    ngOnInit() { 
        console.log( this.commentService.testfunction() ); 
    }
}

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: '[web-application]',
  templateUrl: 'template/home',
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { CommentsComponent } from './components/comments.component';
import { HomeComponent } from './components/home.component';

const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: 'comments', component: CommentsComponent }
];

export const appRouterProviders = [
  provideRouter(routes)
];

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';
import { appRouterProviders } from './app.routes';
import { CommentService } from './services/comment.service'

bootstrap(AppComponent, [
  appRouterProviders,
  CommentService
])
.catch(err => console.error(err));

Somebody have an idea why I can't inject the service?

Upvotes: 2

Views: 3780

Answers (3)

Kaleab
Kaleab

Reputation: 367

In typescript, it is possible to declare and instantiate properties implicitly or explicitly.

Implicit declaration pass properties to the constructor function by adding access modifier to each property and not implement anything inside the constructor.

constructor(private commentService:CommentService) {}

The class will have a property called commentService with private access modifier.

Explicit declaration and initialization Declare class properties and then initialize them in the constructor with the values passed to the constructor.

class Component {
  private commentService: CommentService;
 
  constructor(comentService: CommentService) {
    this.commentService = commentService;
  }
}

So what you did was you passed a param to the constructor and didn't use it at all plus the class has no declared property. so the class won't have commentService property at all. You should either add an access modifier to the parameter of the constructor and declare it implicitly or declare it yourself in the class as class property and initialize it explicitly.

Upvotes: 0

Mehari
Mehari

Reputation: 3267

you should provide access modifier when you inject a dependency . Use this

export class CommentsComponent implements OnInit {
    constructor(private commentService: CommentService) {
}

Upvotes: 1

Günter Zöchbauer
Günter Zöchbauer

Reputation: 658067

export class CommentsComponent implements OnInit {
    construct(commentService: CommentService) {

should be

export class CommentsComponent implements OnInit {
    constructor(private /* or public */ commentService: CommentService) {

Adding private or public makes it an instance property, otherwise it's just a parameter.

Upvotes: 7

Related Questions