I'm upgrading my app from Angular 17 to Angular 19 (19.0.6) and nx20. I encountered some problems with TestBed and standalone component.

I have the following code :

@Component({
  templateUrl: './connectionponent.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: false
})
export class ConnectionComponent implements OnInit {...

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FakesModule, CoreTranslationTestingModule, MockComponent(FeatureConsentsComponent)],
      declarations: [
        ConnectionComponent,
        MockComponent(ButtonComponent),
        MockComponents(MotivationBlockComponent, MotivationBlockItemComponent)
      ],
      providers: [
        provideMockStore(),
        provideDummyTokens(),
      ]
    });
    fixture = TestBed.createComponent(ConnectionComponent);
    component = fixtureponentInstance;
  });

The FeatureConsentsComponent is a standalone component :

@Component({
    selector: 'consents',
    templateUrl: './consentsponent.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgIf, CheckBoxModule, LayoutModule, NgFor, AsyncPipe, TranslateModule],
    providers: [ConsentsHttpService, addDynamicComponentProviders(ConsentsErrorsProvider)]
})

But I have the following error when I try to run the test file :

    Unexpected "MockOfFeatureConsentsComponent" found in the "declarations" array of the "TestBed.configureTestingModule" call, "MockOfFeatureConsentsComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?

If I force standalone: true on the FeatureConsentsComponent it works. Why ?

I'm upgrading my app from Angular 17 to Angular 19 (19.0.6) and nx20. I encountered some problems with TestBed and standalone component.

I have the following code :

@Component({
  templateUrl: './connectionponent.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: false
})
export class ConnectionComponent implements OnInit {...

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FakesModule, CoreTranslationTestingModule, MockComponent(FeatureConsentsComponent)],
      declarations: [
        ConnectionComponent,
        MockComponent(ButtonComponent),
        MockComponents(MotivationBlockComponent, MotivationBlockItemComponent)
      ],
      providers: [
        provideMockStore(),
        provideDummyTokens(),
      ]
    });
    fixture = TestBed.createComponent(ConnectionComponent);
    component = fixtureponentInstance;
  });

The FeatureConsentsComponent is a standalone component :

@Component({
    selector: 'consents',
    templateUrl: './consentsponent.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgIf, CheckBoxModule, LayoutModule, NgFor, AsyncPipe, TranslateModule],
    providers: [ConsentsHttpService, addDynamicComponentProviders(ConsentsErrorsProvider)]
})

But I have the following error when I try to run the test file :

    Unexpected "MockOfFeatureConsentsComponent" found in the "declarations" array of the "TestBed.configureTestingModule" call, "MockOfFeatureConsentsComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?

If I force standalone: true on the FeatureConsentsComponent it works. Why ?

• angular
• angular-test
• angular-standalone-components
• ng-mocks

• What is MockComponents ? Could you please fork stackblitz/edit/ng-jasmine and repro your issue ? – Matthieu Riegler Commented Jan 17 at 17:50
• Additionaly, the component config of ConnectionComponent would be helpful as well. I believe MockComponent might only be working when the passed Component is standalone and is configured inside "imports" both in the test and the tested component (ConnectionComponent in this case) itself? – Loop Commented Jan 18 at 13:46

1 Answer 1

I suppose that you use the lib ng-mocks.

The problem that you describe is exactly the one of this issue: https://github/help-me-mom/ng-mocks/issues/10632

Upgrading ng-mocks to 14.13.2 should solve your problem