Angular - Display a component in index.html

I am trying to display a create-form-component from the index.html.

I have:

import 'zone.js/dist/zone';
import { Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { BirdCreateFormComponent } from './create-form/create-form.component';

@NgModule({
  declarations: [BirdCreateFormComponent],
  imports: [CommonModule],
  bootstrap: [App],
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

And in index.html:

<body>
  <my-app>Loading...</my-app>
  <create-form></create-form>
</body>

But the <create-form> tag was ignored - why?

Stackblitz here.

I am new to Angular so a narrative around the answer would be great.

Solution

App is the starting (root) component of the Angular Application. Thus you can't render the BirdCreateFormComponent in the index.html, but you need through App to render BirdCreateFormComponent.
You are mixing up the NgModule and Component for App. As starting from Angular 15.2, it supports bootstrapping standalone component without the root module.

If you are looking for bootstrapping Standalone component solution, you need to build the components as standalone.

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, BirdCreateFormComponent],
  template: `
    <create-form></create-form>
  `,
})
export class App {
  ...
}

@Component({
  selector: 'create-form',
  templateUrl: './create-form.component.html',
  standalone: true,
  styleUrls: ['./create-form.component.css']
})
export class BirdCreateFormComponent {
   ...
}

Reference: Migrate an existing Angular project to standalone

Demo Bootstrapping Standalone Component @ StackBlitz

Or if you are looking for bootstrapping module, you need the root module and bootstrap it.

import {
  BrowserModule,
  platformBrowser,
} from '@angular/platform-browser';
import { BirdCreateFormComponent } from './create-form/create-form.component';

@NgModule({
  declarations: [App, BirdCreateFormComponent],
  imports: [BrowserModule],
  bootstrap: [App],
})
export class AppModule {}

platformBrowser()
  .bootstrapModule(AppModule)
  .catch((e) => console.error(e));

@Component({
  selector: 'my-app',
  template: `
    <create-form></create-form>
  `,
})
export class App {
  ...
}

Demo Bootstrapping Module @ StackBlitz