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.
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 {
...
}