NG 05100 in stackblitz

I am getting NG05100 in stackblitz, i have created the simplest stackblitz i can so i can figure out what i am doing that is causing ng5100. I think this is probably something really simple. I have got myself in this situation using chatGPT, so it is likely that tool has given me bad advice , as opposed to this being some deep technical problem.

I am simply trying to get a material textbox to render.

the blitz can be found here https://angular-tsqlaaw7.stackblitz.io

here is main.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { IsolationComponent } from './app/isolation/isolation.component';

@Component({
selector: 'app-root',
standalone: true,
imports: [IsolationComponent, CommonModule],
template: `
<h1>Hello from {{ name }}!</h1>
<a target="_blank" href="https://angular.dev/overview">
Learn more about Angular
</a>


<app-isolation></app-isolation>


`,
})
export class App {
name = 'Angular';
}

bootstrapApplication(App);


here is isolation.component.ts

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';

@Component({
selector: 'app-isolation',
standalone: true,
imports: [
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
NoopAnimationsModule,
],
template: `
<mat-form-field appearance="fill">
<mat-label>Test Input</mat-label>
<input matInput [formControl]="control" />
</mat-form-field>
`,
styles: [
`
mat-form-field {
width: 100%;
display: block;
}
`,
],
})
export class IsolationComponent implements OnInit {
control = new FormControl('');
constructor() {}

ngOnInit() {}
}

Continue reading...