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
Appis the starting (root) component of the Angular Application. Thus you can't render theBirdCreateFormComponentin the index.html, but you need throughAppto renderBirdCreateFormComponent.You are mixing up the
NgModuleandComponentforApp. 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.