Issue with NullInjectorError: Failure to provide a custom component - Attempting to add to providers without success

I keep encountering errors during my test attempts...

Despite looking into similar issues, I am still facing problems even after adding my custom LoginComponent to app.module.ts providers. It is already included in the imports section.

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppHttpInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.component.spec.ts (abridged)

import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';

import {LoginComponent} from './login.component';
import {FormsModule, NgForm} from '@angular/forms';
import {HttpClientModule} from "@angular/common/http";
import {AuthService} from "../../services/auth/auth.service";

describe('LoginComponent', () => {
   beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      imports: [FormsModule, HttpClientModule, FormsModule]
    }).compileComponents();

    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
  }));

    it('Attempt login with various invalid forms', 
      inject([LoginComponent, AuthService],
      (loginComp: LoginComponent, authServ: AuthService) => {

    // More testing components

    }));

}

Answer №1

After some troubleshooting, I came to the realization that in order to fix the issue, I needed to include my LoginComponent in both the declarations and providers sections.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      imports: [FormsModule, HttpClientModule],
      providers: [LoginComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
  }));

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

Enter key not triggering submission in jQuery UI autocomplete field

I'm currently working on implementing the autocomplete feature following a tutorial, and while it's functioning, I'm facing an issue with submitting the form when the user selects an item and hits enter. Below is the Coffeescript code that I ...

Differences between Angular 4 and AngularJs directives

Delving into the world of Angular 4, I have encountered a slight hurdle in my understanding of directives. My goal is to create a directive that can resize an element based on its width. Back in the days of AngularJs, this task was accomplished with code r ...

Utilize inline scripts within the views of Yii2 for enhanced functionality

I stumbled upon a jQuery code online that allows for the integration of Google Maps, and I'm looking to implement it in my application to ensure accurate address retrieval. You can find the jQuery code here. Currently, I am working with yii2 Advanced ...

How to dynamically generate Angular component selectors with variables or loops?

Looking to dynamically generate the Selector Tag in my app.component.html using a variable. Let's say the variable name is: componentVar:string What I want in my app.component.html: <componentVar></componentVar> or <app-componentVar& ...

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

I've created a basic template for my PHP website, but I'm struggling to find the best way to include my CSS and JavaScript files. Take a look at my index.php file below: <?php include'core/template.php'; $temp=new Template(); $sett ...

Having troubles with Angular 2 subscription functionality?

I am attempting to launch a modal window that has its template and logic in a separate component. My goal is to accomplish this by subscribing to an observable, but I am encountering issues. Below is my code: Method within the component where I want to tr ...

Can you verify my comprehension of the process for iteratively displaying numerous custom Tree components in Vue.js 3?

While exploring the Vue.js documentation, I came across an example of iteratively rendering a Tree using the v-for directive. My aim was to modify the code to render multiple TreeItems in the App.vue file. I am puzzled by the fact that it is possible to i ...

Angular is not providing the anticipated outcome

I'm new to Angular (7) and I'm encountering an issue while trying to retrieve the status code from an HTTP request. Here's the code snippet used in a service : checkIfSymbolExists() { return this.http.get(this.url, { observe: 'res ...

When a new component is loaded, React Martial UI component may face issues due to overwriting or

Currently, we are working on a vast web application that utilizes jquery and bootstrap. Our current task involves transitioning this extensive app to React with Material UI, piece by piece. As we progress towards transforming it into a React app, everythin ...

Angular: The metadata version does not match for the module located in src/app/app.module.ts. A version of 3 was found when version

Recently, I made the transition from Angular 4.0.0 to 5.2.0. However, after implementing the recommended changes, I encountered a perplexing error message: ERROR in Error: Metadata version mismatch for module /home/khalidvm/Desktop/Workspace/Front/Migrat ...

Is it possible for Angular's ngStyle to accept multiple functions? If not, what is the alternative solution?

Can multiple conditions be added to different attributes with ngStyle? Is it possible to change text color and background color based on specific JSON values using ngStyle? About the Project: I am currently working on creating a tab bar that resembles a ...

Issue: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables like Arrays. Solution needed to resolve this

Code snippet for a service that returns JSON data export class EmployeeServiceService { constructor(private _http:Http) { } GetEmployees(): Observable<IEmployee[]>{ debugger; return this._http.get("http://localhost:2724/a ...

Encountering difficulties in creating a new package for angular

I am having trouble generating a new package for Angular. Here are the software version details: npm -v v6.1.0 node -v v8.11.3 ng -v v6.0.8 When attempting to create the project with ng new project_name, I encounter the following error: https:// ...

Converting a JSON object that is created dynamically to XML in node.js

Is there a way to convert a dynamically created JSON object into XML using node.js? I am tasked with generating JSON objects dynamically based on available data, which includes nested lists of objects. var Obj = { root: { Door_Keeper: { ...

Using Angular material to display a list of items inside a <mat-cell> element for searching

Can I use *ngFor inside a <mat-cell> in Angular? I want to add a new column in my Material table and keep it hidden, using it only for filtering purposes... My current table setup looks like this: <ng-container matColumnDef="email"> < ...

Using Express.js to Serve Static Content on a Dynamic Route

I am working with the app.js code below; app.use(express.static(__dirname + "/public")); app.use("/example", express.static(__dirname + "/public")); app.engine("html", require("ejs").renderFile); app.get("/", (req, res) => res.render("index.ejs")); a ...

Error: When trying to run the server using npm, the program returned the message '. is not a recognized command, either internally or externally

I'm currently facing an issue with Angular and npm that I have not been able to resolve yet. The project I am working on can be found at this GitHub repository. While this code has worked for others, it seems like the problem lies on my end. When I r ...

Unable to locate image in React framework

When attempting to display an image, I encountered a 404 error even though the folder containing it is being served properly. Code snippet from JSX file: render: function(){ ... return <button type="button" id="powerButton" onClick={this.someFun}>& ...

What could be causing the malfunction of the constructor of these two root services?

Below are two primary root services: Service 1: @Injectable({ providedIn: 'root', }) export class DataService { private data$ = new BehaviorSubject([]); public dataObs$ = this.data$.asObservable(); constructor(private http: HttpClient) ...

Perform a series of clicks

I'm attempting to click a button multiple times. After each click, the button takes 1 second to load, then reappears and can be clicked again. My goal is to click this button a total of 5 times. for(i=0;i<5;i++) $('.class').click(); ...