[SOLVED] selector name doesn't match any elements for standalone component in Angular

selector name doesn't match any elements for standalone component in Angular

I'm trying to use stadalone component but it gives me this error: The selector "app-login" did not match any elements But the thing is, <app-login></app-login> is not written anywhere. My login component:

import { Component, inject } from '@angular/core';
import { AuthService } from '../auth.service';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  imports: [FormsModule,CommonModule],
})
export class LoginComponent {
  auth = inject(AuthService);

  title = 'trial';
  email!: string;
  password: string = '';

  onSubmit() {
    this.auth.login(this.email, this.password);
  }
}

And main.ts includes this code except imports:

bootstrapApplication(LoginComponent)
  .catch(err => console.error(err));

I was trying to use standalone component. I don't know why does app give an error like this.

Solution

When you bootstrap a component, you have to write its selector in the index.html file, otherwise it won't work.

<body>
  <app-login />
</body>