TestingCompilerFactory is not available as a provider

Question

TestingCompilerFactory is not available as a provider

Currently troubleshooting my test file to identify the issue that is hindering a successful test run:

    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();
    });

Encountering an error that seems to be related to incorrect wrapping:

error  TS1005: ';' expected.

Additionally, facing:

No provider for TestingCompilerFactory

javascript angular typescript angular-test

Answer 1

Answer №1

Begin by correcting the syntax error^1,2

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

Next, focus on the important error

A provider can take two forms.

The first form is a value that serves as both the value provided and the key under which it is registered. This often involves a class, like in the example below

const Dependency = class {};

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

The second form is an object with a provide property indicating the key under which the provider is registered and additional properties specifying the value being provided. For instance

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

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

Based on the explanation above, it seems you forgot to mention the actual value provided under the key TestingCompilerFactory.

To fix this, include

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

which can be simplified to

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

as mentioned earlier.

Important Points

In the future, avoid posting questions that contain obvious errors - try to fix them first.
Avoid combining multiple questions into one post.

Answer 2

Begin by correcting the syntax error^1,2

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

Next, focus on the important error

A provider can take two forms.

The first form is a value that serves as both the value provided and the key under which it is registered. This often involves a class, like in the example below

const Dependency = class {};

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

The second form is an object with a provide property indicating the key under which the provider is registered and additional properties specifying the value being provided. For instance

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

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

Based on the explanation above, it seems you forgot to mention the actual value provided under the key TestingCompilerFactory.

To fix this, include

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

which can be simplified to

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

as mentioned earlier.

Important Points

In the future, avoid posting questions that contain obvious errors - try to fix them first.
Avoid combining multiple questions into one post.

TestingCompilerFactory is not available as a provider

Answer №1

Similar questions

Is there a way to toggle a command for a specific discord server rather than enabling it for all servers where the bot is present?

What is the best way to retrieve the present value of an input that belongs to an array of objects?

Update the style of the legend from bars to a line chart in chart.js version 2.4.0

Extracting the value of an HTML element from a string variable in AngularJS

Guide to implementing bidirectional data binding for a particular element within a dynamic array with an automatically determined index

String date in the format "dd-MM-yyyy" cannot be transformed into a date using the 'DatePipe' function

Obtain the promise value before returning the observable

AngularJS: Hide Row in NG-Grid Based on Condition

Ways to include multiple pieces of data in a JQuery Mobile List view

Vertical and horizontal tabs not functioning properly in Mat tabs

Having trouble with implementing Nested routes in Vuejs?

Enhancing the selection of options in Angular 2 using object values

Animating numerous elements simultaneously during Vue component rendering

Notifications for AngularJS tabs

Issue with Angular 7: "Unspecified name attribute causing control not found"

Building Reusable Components in Angular 2: A Step-by-Step Guide

Incorporate a jQuery userscript on Firefox that includes a link to a form

Mozilla struggles to interpret JSON data

Having trouble with request-promise in node.js? It's not functioning as anticipated

Explore the full range of events available on the Angular UI-Calendar, the innovative directive designed for Arshaw FullCalendar