`ng serve` fails if service is not provided directly in component

Question

I have a project structured like so:

project
-src
--app
---project
----project.component.ts
----project.component.html
----project.component.sass
---project.module.ts
---project.service.ts

From within my component I am attempting to use the service:

constructor(private ProjectService: ProjectService) {
    this.ProjectService = ProjectService;
}

But when I run ng serve it fails saying ERROR in /Users/jrquick/uabshp/project/src/app/project/project.component.ts (9,49): Cannot find name 'ProjectService'

Even though I have the service in the project.module.ts file:

import { ProjectService } from './project.service';

@NgModule({
    declarations: [
        ProjectComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule
    ],
    providers: [
        ProjectService
    ],
    bootstrap: [
        ProjectComponent
    ],
    exports: [
        ProjectComponent,
        ProjectService
    ]
})

I have tried adding it to my component annotation's providers array but I'd prefer the service is used a singleton. I can also directly import the service in the project.compontent.ts file (like below) but it is not ideal to have to have the same import statement copy and pasted within the module as well as multiples components and services.

import { ProjectService } from './project.service';

project.service.ts declaration:

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

@Injectable()
export class DefaultVariableService {
    constructor() {

    }

   ...
}

I have, I added the declaration for the service to the question too. — Jeremy, Aug 09 '17 at 14:25
you need to specify the import on every component you plan to use this service — Rahul Singh, Aug 09 '17 at 14:26

Jaroslaw K. · Accepted Answer · 2017-08-09T14:34:09.363

1

Try this, because you trying import ProjectService from the same folder in which ProjectComponent is located. Your import of ProjectService in project.component.ts should look like

import { ProjectService } from '../project.service';

Secondly, why do you use strange stuff like:

constructor(private ProjectService: ProjectService) {
    this.ProjectService = ProjectService;
}

What is the purpose of this?! I think that it should look like:

constructor(private projectService: ProjectService) {

}

and that's all! You can use this service in your component in this way:

this.projectService.someMethod()

edited Aug 09 '17 at 14:34

answered Aug 09 '17 at 14:21

Jaroslaw K.

5,224
2
39
65

I have tried that and it works, however, since the service is inject as a provider in the module is not automatically available to all components and services within the same module? Or is it required to be injected in the module as well as all of the components and services that require it? – Jeremy Aug 09 '17 at 14:23
@jrquick No it is not you need to tell angular about the import of the service – Rahul Singh Aug 09 '17 at 14:25
1

@jrquick I believe Jaroslaw is correct. I think this.ProjectService = ProjectService is the issue. You don't need that line – LLai Aug 09 '17 at 14:30
I am new to Angular 4, migrating from 1 at the moment. The guide I am using shows the constructor setting the services on to `this`. I have tried without but then get errors on the lines where I call the service, I will look further into it though. Thanks @JaroslawK. – Jeremy Aug 09 '17 at 14:33
1

@jrquick looking through the angular tutorials, it does look like they do that for their examples. that statement is needed if you do not declare if the service is public or private. constructor(projectService: ProjectService){}. If you do add public/private then the compiler automatically creates a property and does the assignment for you. – LLai Aug 09 '17 at 14:57

`ng serve` fails if service is not provided directly in component

1 Answers1