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