Attempting to transform the Angular Material Select Demo into a self-contained component.
Check out the Stackblitz here.
Here are the necessary steps:
Replace main.ts with the following (To create standalone component):
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';
import { SelectFormExample } from './app/select-form-example';
const routes: Routes = [];
bootstrapApplication(SelectFormExample, {
providers: [provideRouter(routes)],
});
To make the component standalone, add standalone and imports. The imports should come from app.module.ts:
/**
* @title Select in a form
*/
@Component({
standalone: true,
imports: [
FormsModule,
HttpClientModule,
MatNativeDateModule,
ReactiveFormsModule,
MaterialExampleModule,
CommonModule,
BrowserModule,
BrowserAnimationsModule,
],
selector: 'select-form-example',
templateUrl: 'select-form-example.html',
})
Although it compiles without errors, it throws the following error:
ROR Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
The CommonModule is already included, and removing BrowserModule leads to other issues.
Any suggestions on how to resolve this?