Angular4 / 5依赖项注入文档不起作用

Question

https://angular.io/guide/architecture#services

I'm following the docs on angular.io to inject dependencies like services, etc. I did everything they said and when I try to run it, the console keeps telling me:

Uncaught ReferenceError: LedgerService is not defined

I am doing nothing crazy except creating a simple component with a service where both constructors have console.log commands (constructors in both the component and service). I've done everything Angular says to do in their 2 paragraphs that details this feature of Angular.

The component itself is being injected into the main app module (with the service being injected into the component) and both the component and service were created with the Angular CLI. So there isn't much I've even done at all minus trying to inject the service. So I'm not sure where it is going wrong but it is definitely not working and just shows a blank page (when it previously had basic content by default).

I created both units, tried to specify providers in both the app.module and the component.ts file and neither works and yields the same error--when Angular claims either could work. I've also specified it as a private service within the constructor of the component.ts file.

Everything I've seen relating to this is always for Angular 1 or 2. Neither of which are even remotely similar to Angular 4/5.

If you really want to see this code, fine but it's literally just framework and nothing else:

bookkeeper.component.ts :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bookkeeper',
  templateUrl: './bookkeeper.component.html',
  styleUrls: ['./bookkeeper.component.css'],
  providers: [LedgerServiceService]
})
export class BookkeeperComponent implements OnInit {

    constructor(private service: LedgerServiceService) { }

    ngOnInit() {
        console.log("Ledger component works!");
    }

}

app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { InterfaceComponent } from './interface/interface.component';
import { BookkeeperComponent } from './bookkeeper/bookkeeper.component';


@NgModule({
  declarations: [
    AppComponent,
    InterfaceComponent,
    BookkeeperComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    LedgerServiceService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ledger-service.service.ts :

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

@Injectable()
export class LedgerServiceService {

    constructor() { 
        console.log("wtf");
    }

}

LedgerService is actually called LedgerServiceService because I initially created LedgerService manually and then tried to use the AngularCLI to generate a service and named it LedgerService and it created a service called LedgerServiceService. Naming is not what is wrong. I only initially called it simply LedgerService because I figured it would be confusing.

Answer 1

Your examples are missing the import.

Anywhere we use a custom type, we also need to import that type.

For that reason, in both the module and component you will need to add:

import { LedgerServiceService } from './your-path-here' 

You can see this in the examples they give on https://angular.io/guide/dependency-injection