No provider for TestingCompilerFactory

Question

This is my test file and I am trying to identify the error preventing me from running a successful test:

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, Directive, Input, OnInit } from '@angular/core';
import { TestComponent } from './test.component';
import { NgbDropdownModule, NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';
import { Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';

import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';


let comp: TestComponent;
let fixture: ComponentFixture<MyComponent>;

describe('TestComponent', () => {
   beforeEach(() =>  {
      TestBed.configureTestingModule({
        declarations: [ TestComponent ],
        providers: [
           // DECLARE PROVIDERS HERE
          { provide: TestingCompilerFactory }
        ]
      }).compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(TestComponent);
        comp    = fixture.componentInstance;
      });
    }));
    it('should be created', () => {
      expect(TestComponent).toBeTruthy();
    });

I am getting this error which I guess is because I am not wrapping it correctly.

error  TS1005: ';' expected. 

But I also get

No provider for TestingCompilerFactory

Answer 1

First fix your syntax error^1,2

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [TestComponent],
    providers: [{ provide: TestingCompilerFactory }]
  })
  .compileComponents()
  .then(() => {
    fixture = TestBed.createComponent(TestComponent);
    comp = fixture.componentInstance;
  });
}); // excess `)` removed

Now, onto the noteworthy error

A provider takes can take two forms.

The first is a value that acts as both the value provided and the key under which it is registered. This commonly takes the form of a class as in the following example

const Dependency = class {};

@NgModule({
  providers: [Dependency]
}) export default class {}

The second is an object with a provide property specifying the key under which the provider is registered and one or more additional properties specifying the value being provided. A simple example is

const dependencyKey = 'some key';
const Dependency = class {};

@NgModule({
  providers: [
    {
      provide: dependencyKey,
      useClass: Dependency
    }
  ]
}) export default class {}

From the above it you can infer that you failed to specify the actual value provided under the key TestingCompilerFactory.

To resolve this write

TestBed.configureTestingModule({
  declarations: [TestComponent],
  providers: [
      {
        provide: TestingCompilerFactory,
        useClass: TestingCompilerFactory
      }
    ]
})

which is redundant and can be replaced with

TestBed.configureTestingModule({
  declarations: [TestComponent],
  providers: [TestingCompilerFactory]
})

as described above.

Notes

1. In the future do not post questions that include such an obvious error - fix it yourself instead.

2. Do not post two questions as one.