mercredi 25 avril 2018

Angular Testing Errors with Karma

I'am having an issue starting my angular project testing.

Context:

I have one main component that nest other component to show a spinner just like this:

<div class='showSpinner' *ngIf="showSpinnerCustomer">
    <div class="spinner">
      <app-spinnerCustomers></app-spinnerCustomers>
      <h2>Loading...</h2>
    </div>
  </div>`

The problem comes when I start the command ng test and appear this type of error:

Failed: Template parse errors:
'app-spinnerCustomers' is not a known element:
1. If 'app-spinnerCustomers' is an Angular component, then verify that it is part of this module.
2. If 'app-spinnerCustomers' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div class='showSpinner' *ngIf="showSpinnerCustomer">
    <div class="spinner">
      [ERROR ->]<app-spinnerCustomers></app-spinnerCustomers>
      <h2>Loading...</h2>
    </div>
"): ng:///DynamicTestModule/ListCustomersComponent.html@12:6

I have this modularized in 2 modules:

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { APP_ROUTES } from './app.routes';
import { ListCustomersComponent } from './components/list-customers/list-customers.component';
import { HttpClientModule } from '@angular/common/http';
import { CustomerService } from './services/customer/customer.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SpinnersModule } from './components/spinners/spinners.module';

@NgModule({
  declarations: [
    AppComponent,
    ListCustomersComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    APP_ROUTES,
    SpinnersModule
  ],
  providers: [
    CustomerService
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

And in the spinner module:

spinners.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpinnerCustomersComponent } from './spinnerCustomers/spinnerCustomers.component';

@NgModule({
    declarations: [
        SpinnerCustomersComponent
    ],
    imports: [
      CommonModule
    ],
    exports: [
        SpinnerCustomersComponent
    ]
  })
export class SpinnersModule { }

Any clue what is going on here and what could I do to fix it? I have run out of ideas.

Thank you.

Aucun commentaire:

Enregistrer un commentaire