unable to inject into a component?

Question

A parameterless constructor works but when I try to inject anything the page returns a runtime error of:

Can't resolve all parameters for AppComponent: (?)

Any idea what the issue might be? Here's the code:

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { environment } from '../environments/environment';
import { MyService } from './my.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(environment.firebase)
  ], 
  //providers:[],  
  providers: [MyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component, Inject, Injectable, HostListener } from '@angular/core';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { VendingMachineService } from './vending-machine.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent 
{

/*
    constructor()
    {
    }
*/  

    constructor(ms)         
    {
        var x = vms;
    }
}

my.service.ts:

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

@Injectable()
export class MyService {

    constructor() { }

    public test(){ } 
}

score 1 · Answer 1 · answered Dec 11 '17 at 04:40

rewrite

app.component.ts:

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { VendingMachineService } from './vending-machine.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

//please check vendingMachineService, this is not the name of the service you provided in code
    constructor(private vendingMachineService: VendingMachineService){}

/*
    constructor(ms)     what is ms????? remove
    {
        var x = vms;
    }
*/
}

Why would you import the modules you already imported in your app module? and if you wanted to do it which i don't think so, you'd need to declare another module

And you probably want to consider renaming your service to my-service.service.ts, looks better

score 0 · Answer 2 · answered Dec 11 '17 at 14:28

If you want to inject MyService to your component then your constructor should look like this:

import { Component, Inject, Injectable, HostListener } from '@angular/core';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { VendingMachineService } from './vending-machine.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


    // CLASS as type is required for Angular to match to your service
    // otherwise angular doesn't know what to inject
    // Also I have added the access modifier private
    // which creates an field so you can access via this.myservice
    constructor(private myService: MyService){
    }

    // Example usage in a method:
    someMethod(){
       this.service.doSth();
    }
}

unable to inject into a component?

2 Answers2