Angular - Display a component in index.html

Question

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.

There is an error in the console, the Angular application does not load properly. But even after fixing that error, the create form component is used in index.html outside Angular context, this doesn't work. Further reading: angular.io/guide/bootstrapping — JSON Derulo
– JSON Derulo, Commented Oct 26, 2023 at 7:44
Does this answer your question? How to include the ts component in index.html file — JSON Derulo
– JSON Derulo, Commented Oct 26, 2023 at 7:59
Take a look this SO. See that you have only one tag. The component can have severals components, a component and a router-outlet, severals router-outlet... — Eliseo
– Eliseo, Commented Oct 26, 2023 at 8:14

Yong Shun · Accepted Answer · 2023-10-26 08:05:46Z

3

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

edited Oct 26, 2023 at 8:05

answered Oct 26, 2023 at 8:00

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pieterjan Over a year ago

Bottom sample: shouldn't the BirdCreateFormComponent be in the bootstrap array too?

Yong Shun Over a year ago

Hi, no, because in the showing example I am using the App as the startup component. And in the HTML template of App render the BirdCreateFormComponent with <create-form></create-form>.

Collectives™ on Stack Overflow

Angular - Display a component in index.html

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related