angular5 ng test - StaticInjectorError from custom service

Question

Project Created by angular cli

Angular CLI: 1.7.2
Node: 6.11.4
OS: win32 x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

And generated service with ng command.

ng g service newService2

and I tried 'ng test' to test my code, but I got error like below.

StaticInjectorError(Platform: core)[AppComponent -> NewService2Service]: NullInjectorError: No provider for NewService2Service! Error: StaticInjectorError(DynamicTestModule)[AppComponent -> NewService2Service]: at _NullInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js._NullInjector.get node_modules/@angular/core/esm5/core.js:1002:1) at resolveToken node_modules/@angular/core/esm5/core.js:1300:1)

here is my code.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewService2Service } from './svc2/new-service2.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ NewService2Service],
  bootstrap: [AppComponent]
})

svc2/new-service2.service.ts

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

@Injectable()
export class NewService2Service {
  constructor() { }
  getName(): String {
    return 'service name';
  }
}

svc2/new-service2.service.spec.ts

import { TestBed, inject } from '@angular/core/testing';
import { NewService2Service } from './new-service2.service';

describe('NewService2Service', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [NewService2Service]
    });
  });

  it('should be created', inject([NewService2Service], (service: NewService2Service) => {
    expect(service).toBeTruthy();
  }));
});

app.component.ts

import { Component } from '@angular/core';
import { NewService2Service } from './svc2/new-service2.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: String = 'app';
  constructor( private service2: NewService2Service) {
    //this.title = service2.getName();
  }
}

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});

Answer 1

In your AppComponent.spec.ts you must provide your service:

   TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      providers: [NewService2Service]
    });