How to include the ts component in index.html file

Question

How to include the ts component in index.html file.I have been searching for it since a long time but no use can any one suggest help.

1

Have you tried anything? – henrybbosa Aug 06 '16 at 11:25

score 3 · Answer 1 · answered Aug 06 '16 at 11:25

3

Just use

bootstrap(MyComponent)

to add a component to index.html. The selector of the component needs to match a tag in index.html

answered Aug 06 '16 at 11:25

Günter Zöchbauer

623,577
216
2,003
1,567

Gunter,here my problem is i have some html tags in index.html and i want to use binding to it from an external ts file. – MMR Aug 06 '16 at 11:28
Binding on root components is not supported. – Günter Zöchbauer Aug 06 '16 at 11:29
How can we use shared services in index.html – MMR Aug 06 '16 at 11:33
[take a look on angular2 sample app](https://github.com/blinfo/angular2-webpack-seed) – Jorawar Singh Aug 06 '16 at 11:33
http://stackoverflow.com/questions/36566698/cant-initialize-dynamically-appended-component-in-angular-2/36566919?noredirect=1#comment60736661_36566919 – Günter Zöchbauer Aug 06 '16 at 11:35

Srinivas Damam · Answer 2 · 2016-08-06T11:48:41.497

Assuming that you are building angular 2 application and want to add component to index.html file.

Create a class using component decorator and make sure you add selector property and template in decorator and bootstrap the app using angular's core bootstrap method with Component name.

main-component.ts
   import { bootstrap } from '@angular/platform-browser-dynamic';
   import { Component } from "@angular/core"

   @Component({
     selector: 'root',
     template: <div>It works!</div>
   })
   export class RootComponent{
    constructor(){}
   }

   bootstrap(RootComponent)

index.html

<body>
 <root></root>
</body>

bootstrap tells angular how to load your component since angular can be used to develop native mobile applications and web application you have use bootstrap method to initialize the application for a specific platform.

`Module '"../node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic"' has no exported member 'bootstrap'.` — dtrunk, Sep 14 '20 at 19:10

score 1 · Answer 3 · answered Feb 18 '22 at 12:20

None of those answers worked for me. However, the solution is very simple.

First create the component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './app-navigation-bar.component.html',
  styleUrls: ['./app-navigation-bar.component.css']
})
export class AppNavigationBarComponent implements OnInit {

  constructor() { }

  ngOnInit(): void { }

}

Second, add the component to the app bootstrap:

// File: app.module.ts
@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent, AppNavigationBarComponent]
})
export class AppModule { }

Third, use the component within the index.html:

...
<body>
  <app-navigation-bar></app-navigation-bar>
  <app-root></app-root>
</body>
...

How to include the ts component in index.html file

3 Answers3

Linked