Issue
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 theBirdCreateFormComponent
in the index.html, but you need throughApp
to renderBirdCreateFormComponent
.You are mixing up the
NgModule
andComponent
forApp
. 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
Answered By - Yong Shun
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.