NG 05100 in an angular spec

Trying to get a basic Material input to work in NG 18 Got this working w TestComponent as an old style component.

I change the testComponent to standalone : true

Cant seem to get the imports correct. I am getting the error NG05100: Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead.

on the line marked below w the left arrows.

What am i doing wrong?

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@Component({
selector: 'app-test-textbox',
template: `
<mat-form-field appearance="fill">
<mat-label>Test Input</mat-label>
<input matInput [formControl]="control" />
</mat-form-field>
`
, standalone: true
, imports: [
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
NoopAnimationsModule
]
})
class TestTextboxComponent {
control = new FormControl('initial');
}

describe('TestTextboxComponent', () => {
let fixture: ComponentFixture<TestTextboxComponent>;
let input: HTMLInputElement;

beforeEach(async () => {
debugger;
try {
await TestBed.configureTestingModule({
imports: [

TestTextboxComponent
]
}).compileComponents();
debugger;
fixture = TestBed.createComponent(TestTextboxComponent;← ← ← error happens here
fixture.detectChanges();
await fixture.whenStable();

input = fixture.debugElement.query(By.css('input')).nativeElement;
} catch (err: any) {
debugger;
console.log(err);
}

});

it('should show the initial value', () => {
expect(input.value).toBe('initial');
});

Continue reading...