Uncaught Error: No component factory found for ClientDetailsComponent.

[gorru]

Uncaught Error: No component factory found for ClientDetailsComponent. Did you add it to @NgModule.entryComponents?

Hello. Angular 10 App ClientDetailsComponent is dynamically loaded at runtime and is present in the @NgModule.entryComponents The app is working with ng serve but it shows that error when running cypress with your extension. I also tried to this setup without success

    initEnv(AppComponent, {
      providers: [MyMqttService, CommandHandlerService, ClientDetailsComponentFactoryService, EnvService],
      declarations: [ClientDetailsComponent],
      imports: [FormsModule, HttpClientModule, MqttModule.forRoot(MQTT_SERVICE_OPTIONS)],
    });
    getCypressTestBed().configureTestingModule({declarations: [ClientDetailsComponent]})
    getCypressTestBed().overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ClientDetailsComponent] } })

Could you help me? Thanks in advance Giancarlo

[LeJeanbono]

Hi @gorru, Can you post your ClientDetailsComponent please ? Will try to reproduce but, why are you using entryComponents? You no longer need it with Ivy and it is deprecated since v9. Thanks for using cypress-angular-unit !

[gorru]

Thanks Jean-Michel I tried entryComponents after some search on the internet. I saw that is deprecated but I tried anyway. Here the ClientDetailsComponent .ts file:

import {Component, Inject, Input, OnDestroy, OnInit} from '@angular/core'; import {MyMqttService} from '../services/mqtt.service'; import {Subscription} from 'rxjs'; import {IMqttMessage} from 'ngx-mqtt';

@Component({ selector: 'app-client-details', templateUrl: './client-details.component.html', styleUrls: ['./client-details.component.css'], }) export class ClientDetailsComponent implements OnInit, OnDestroy { @Input() client: any;

private subscription: Subscription; private message: string;

constructor(private mqttService: MyMqttService) { this.subscription = this.mqttService.commandFeedback().subscribe((message: IMqttMessage) => { this.message = message.payload.toString(); console.log('commandFeedback: ' + this.message); });

this.subscription = this.mqttService.status().subscribe((message:

IMqttMessage) => { this.message = message.payload.toString(); console.log('status: ' + this.message); }); }

ngOnInit(): void { }

ngOnDestroy(): void { this.subscription.unsubscribe(); }

}

.html

{{client.name}} - {{client.ip}}

On Thu, Sep 17, 2020 at 1:27 PM Jean-Michel Leclercq < notifications@github.com> wrote:

Hi @gorru https://github.com/gorru, Can you post your ClientDetailsComponent please ? Will try to reproduce but, why are you using entryComponents? You no longer need it with Ivy and it is deprecated since v9. Thanks for using cypress-angular-unit !

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bahmutov/cypress-angular-unit-test/issues/163#issuecomment-694169130, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA7PCLIQ7334M4UWAFSQYZDSGHXATANCNFSM4RQGGDCQ .

[LeJeanbono]

I've got something working with your component. I just remove private from message and print it in the html. Here is the test :

it('should create', () => {
    initEnv(ClientDetailsComponent, {
      providers: [MyMqttService],
    });
    // Inject manually the service to get the reference
    const mqttService = getCypressTestBed().inject(MyMqttService);
    const message: IMqttMessage = { payload: new Uint8Array([21, 31]), topic: '', qos: 0, retain: true, dup: true, cmd: 'connect' };
    // Create a stub to replace the message of commandFeedback
    cy.stub(mqttService, 'commandFeedback').returns(of(message));
    // Pass some Input
    mount(ClientDetailsComponent, { client: { name: 'MyName', ip: 'MyIP' } });
    // Assert input and message
    cy.contains('MyName');
    cy.contains('MyIP');
    cy.contains('21,31');
  });

Hope will help !

[LeJeanbono]

Is it working for you @gorru ?

[gorru]

Sorry, I was a little busy. Today I pulled the soource code on a different pc but I'm experiencing lot of errors :-( After some trial ad npm ci now I'm stuck on this error Angular component test from an integration spec is not allowed I remember I already fix this problem but I don't remember how.

[LeJeanbono]

You can't use cypress-angular-unit-test functions in a regular Cypress integration test (https://github.com/bahmutov/cypress-angular-unit-test/blob/master/examples/ng9/cypress/integration/cy-spec.ts)

[LeJeanbono]

Any news @gorru ?

[gorru]

Hi Jea-Michel. Sorry for delay. I have temporary stop that project so I can't say if my problems are solved.

Sorry

On Wed, Oct 21, 2020 at 11:25 PM Jean-Michel Leclercq < notifications@github.com> wrote:

Any news @gorru https://github.com/gorru ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bahmutov/cypress-angular-unit-test/issues/163#issuecomment-713886527, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA7PCLJVX6EJ4VMJ2NVTVHLSL5GU7ANCNFSM4RQGGDCQ .

[LeJeanbono]

Ok feel free to come back if you need ! In the meantime I close it.