Issue: Angular2 RC2 throwing an error "No provider for DirectiveResolver!" while attempting to utilize TestComponentBuilder during a unit test

I have encountered an issue while trying to test my angular2 application. Every time I import TestComponentBuilder, it throws an error: Error: No provider for DirectiveResolver!

This project is written in TypeScript and uses Angular2 RC2.

Below is the content of my spec (test) file:

import { Component, provide, EventEmitter} from '@angular/core';
import { HTTP_PROVIDERS }    from '@angular/http';

import { PreliminaryNotice } from '../models/preliminary-notice-model';
import { IndustryCategoryDynamicLookup } from '../models/industry-category-dynamic-lookup-model';
import { PreliminaryNoticeService } from '../preliminary-notice-service/preliminary-notice.service';
import { ExpandedPreliminaryNotice } from './expanded-preliminary-notice';

... // Code continues here

Here is the related component code:

import { Component, Injectable, Inject, EventEmitter, OnInit, Output } from '@angular/core';
import { NgClass } from '@angular/common';
import { PreliminaryNotice } from '../models/preliminary-notice-model';
import { IndustryCategoryDynamicLookup } from '../models/industry-category-dynamic-lookup-model';
import { PreliminaryNoticeService } from '../preliminary-notice-service/preliminary-notice.service';

... // Code continues here

And the template HTML for the component:

<div [ngStyle]="getCssClass()" id="expandablePreliminaryNotice_{{preliminaryNotice.id}}">

... // Template code continues here

I attempted to add an import for the DirectiveResolver but it led to a chain of manual additions that seems incorrect. If there are any corrections or missing details, please let me know. Thank you.

Answer №1

Have you given these imports a shot?

import {ComponentFactoryResolver} from '@angular/core';
import {ComponentRef, ComponentType} from '@angular/compiler';

var componentFactoryResolver = new ComponentFactoryResolver();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Invoke a custom AWS CodeBuild project in CodePipeline using a variety of parameters

Imagine having a CodePipeline with 2 stages structured like this: new codepipeline.Pipeline(this, name + "Pipeline", { pipelineName: this.projectName + "-" + name, crossAccountKeys: false, stages: [{ stageName: &apos ...

A guide to linking various choices/dropdowns in Angular version 4

Let me explain my situation the best I can. I have a search filter that works perfectly in Angular 4 when used in this format: <select [(ngModel)]="city_filter" (change)="applyFilter('city',$event.target.value)"> <option value="Ahmedab ...

Utilize Bootstrap in an Angular template to effortlessly expand one element while collapsing all others

I'm facing an issue with a table in my component. Each row has a button that, when clicked, should expand to show some calculated data specific to that row. However, the problem is that when one button is expanded, it keeps other buttons expanded as w ...

What caused the mat-date calendar style to malfunction?

I integrated mat-date into my Angular project, but encountered an issue where the styles of the calendar were not displaying properly when clicking the icon. Here is the displayed calendar effect I attempted to troubleshoot by commenting out the styles o ...

Mastering the art of shaping state in NGRX for the master-detail pattern

Imagine a scenario where I am developing a compact app for organizing tasks. This app makes use of angular and NGRX to efficiently manage the state. Each day, the user loads tasks in the morning and then travels to different locations to complete them. Th ...

Trigger an error in TypeScript with an embedded inner error

Is it possible to throw an Error with an inner Error in TypeScript, similar to how it's done in C#? In C#, you can achieve this by catching the exception and throwing a new one with the original exception as its inner exception: try { var a = 3; ...

Ensure that the web application is successfully logged into using MSTest, and verify that the application is fully loaded before proceeding

I've encountered an issue while using MSTest in Visual Studio 2019 with Selenium. It seems that after logging in, Selenium struggles to locate an element on the dashboard. Upon further investigation, I discovered that my login method within the OneTim ...

Issue experienced with Nebular's NbRoleProvider when running in a live environment

Here is my role.provider.ts: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { map } from 'rxjs/operators/map'; import { NbAuthService, NbAuthJWTToken } from '@nebular/aut ...

What is the reason for the removal of HTML tags in the environment when converting Angular dependencies from es2015 to esm2015 during

After completing the generation of the browser application bundle in Intellij, I noticed that the HTML tags cannot be resolved anymore. What could be causing this issue? I also discovered that if I don't include the AngularMaterialModule in the AppMo ...

How can you determine the number of times a particular digit appears around a specific position in a TypeScript array

(Utilizing Typescript for assistance) I am looking to determine the number of occurrences of the digit 2 surrounding a specific position within an array. The function takes in the position coordinates as parameters - param 1 for row and param 2 for column. ...

Volar and vue-tsc are producing conflicting TypeScript error messages

During the development of my project using Vite, Vue 3, and TypeScript, I have set up vue-tsc to run in watch mode. I am utilizing VS Code along with Volar. This setup has been helpful as it displays all TypeScript errors in the console as expected, but I ...

Troubleshooting: Why is the Array in Object not populated with values when passed during Angular App instantiation?

While working on my Angular application, I encountered an issue with deserializing data from an Observable into a custom object array. Despite successfully mapping most fields, one particular field named "listOffices" always appears as an empty array ([]). ...

There is an issue with the Svelte TypeScript error related to the $: syntax, specifically stating that a declaration cannot be used in a

I encountered an issue where I am receiving the error message "Cannot use a declaration in a single-statement context" while using $: syntax in a script with lang="ts" within my +page.svelte file. Additionally, when I check the version control system (VCS) ...

Is it necessary to have a premium firebase/firestore account in order to set up stripe payments?

When learning how to integrate Stripe payments with Angular and Firebase, make note that a paid Firebase account is required for the cloud function to work. External API requests are blocked on the free "Spark" plan. ...

Matching TypeScript values and types does not function as intended

Recently, I delved into TypeScript to work on my new AngularJS project. However, I encountered an issue where the id, which is supposed to be of type number, is actually being treated as a string. Have I overlooked something in my code? interface IRout ...

How to Exclude Whitespaces from Strings in Angular 6 DataTables

I am facing a simple issue where I need to display strings with spaces like "st ri ng" in rows within a material data table. However, the spaces are being trimmed and I cannot figure out how to keep them intact. Here is a demo on stackblitz: https: ...

Failing to meet the criteria set by Selenium tests in Azure Pipeline

I am currently working on setting up UI test cases in our CI/CD build pipeline within Azure Devops. I have encountered an issue where I need to navigate to a specific internal web page landing screen and verify the presence of a Div element with a Selector ...

Is it possible to stop the Angular application from loading/bootstrapping depending on the URL, Controller, or View?

My setup consists of ASP.Net MVC/Web API working alongside an Angular 2 application, with the exception of the login process which uses a traditional MVC view and controller. While everything functions correctly when loading the login page, the console is ...

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

.segment-button-indicator { -ms-flex-item-align: end; align-self: flex-end; width: 100%; height: 2px; background-color: var(--indicator-color); opacity: 1; } I am a beginner in hybrid app development and ...

Retrieve fresh information every 30 seconds utilizing the useQuery hook in React

I am utilizing '@tanstack/react-query' to retrieve data in my React + Typescript application. Below is a snippet of my code, where I aim to fetch metric data every 30 seconds import { useQuery } from '@tanstack/react-query'; import ...