Loading another component other then App component in Angular

Question

I want to load FleshScreenComponent component in Angular project at first by replacing Appcomponent so for that I am doing it by

 bootstrap: [FleshScreenComponent],

but still I am not able to do it

for the I am putting my full code from app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpClientModule }    from '@angular/common/http';
import { LoginComponent} from './LoginComponent/LoginComponent.component';
import { FleshScreenComponent} from './FleshScreenComponent/FleshScreenComponent.component';



@NgModule({
  declarations: [
    AppComponent,

    LoginComponent,
    FleshScreenComponent,


  ],
  imports: [

  ],
  entryComponents:[
    LoginComponent, PaymentComponent
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [ServicesService ,CommonStorageService,  {provide: MatDialogRef, useValue: {} }],
  bootstrap: [FleshScreenComponent],

})
export class AppModule { }

Answer 1

Take a look at this demo.

You need to provide the selector of FleshScreenComponent in index.html something like what I have done in my demo for HelloComponent

<hello>loading</hello>