How to load an Angular2 component directly on the index.html file?

Question

I have the following project:

$ mkdir angular-material-select
$ cd angular-material-select
$ git clone https://github.com/zeuscronos/angular-material-select.git .
$ git checkout mat-slide-toggle 
$ npm install
$ ng serve

Please, notice the selection of branch: mat-slide-toggle .

I need to be able to load the component: mat-slide-toggle from the /src/index.html file.

In the file: /src/app/app.module.ts I have the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatNativeDateModule } from '@angular/material';
import { SelectResetExample } from './select-reset-example';
import { DemoMaterialModule } from './demomaterial.module';
import { MatSlideToggle } from '@angular/material/slide-toggle'

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpModule,
        DemoMaterialModule,
        MatNativeDateModule,
        ReactiveFormsModule,
    ],
    entryComponents: [MatSlideToggle],
    declarations: [MatSlideToggle],
    bootstrap: [MatSlideToggle],
    providers: []
})
export class AppModule { }

In the file: /src/index.html I have the following:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AngularTemplate</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <div class="mat-app-background basic-container">
        <mat-slide-toggle>Slide me!</mat-slide-toggle>
    </div>
</body>

</html>

This is the structure of the project:

在此处输入图片说明

The project I have on the branch: master works properly, but inside the /src/index.html file it is using: <select-reset-example>loading</select-reset-example> and I want to use: <mat-slide-toggle>Slide me!</mat-slide-toggle> . Below, you have the changes I did from branch: master to branch: mat-slide-toggle :

在此处输入图片说明