Output shows empty blank screen in anuglar 2

Question

 My file structure as follows

 

  -app (Folder Name)

    -appcomponet.ts

    -app.component.html

   -app.component.css 

   -employees (folder Name)

       - employee-list.componennt.html

   -shared  (folder Name)

    -components (folder name)

     -rating.component.css

     -rating.component.ts

    -rating.component.html

 

 

 Employee-list.compnonet.html code as follows

 

 

<tbody>

<tr *ngFor="let employee of employees">

<td>

<img src="assets/images/{{ employee.gender | lowercase }}.png"

class="card-image" alt="employee avatar" />

</td>

<td>{{ employee.firstName | capitalize }}</td>

<td>{{ employee.lastName | capitalize }}</td>

<td>{{ employee.address }}</td>

<td>{{ employee.city | trim }}</td>

<td>{{ employee.state.name }}</td>

<td>{{ employee.salary | currency:'USD':true:'1.2-2' }}</td>

<td>{{ employee.joinDate | date:"MM/dd/yy"}}</td>

<td><rating-star></rating-star></td>

</tr>

<tr *ngIf="!employees.length">

<td>&nbsp;</td>

<td colspan="6">No Employees Found</td>

</tr>

</tbody>

 

 

  rating.component.css code as follows

 

.crop {

overflow: hidden;

}

div {

cursor: pointer;

}

.glyphicon{

float:left;

}

 

  rating.componet.html code as follows

 

<div class='crop'>

<div [title]='rating' *ngFor='let index of range'>

<i class='glyphicon' [ngClass]="index <= rating ? 'glyphicon-star' : 'glyphicon-star-empty'"></i>

</div>

</div>

 

  rating.component.ts code as follows

 

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

@Component({

moduleId: module.id,

selector: 'rating-star',

templateUrl: 'rating.component.html',

styleUrls: ['rating.component.css']

})

export class RatingComponent{

private range: Array<number> = [1, 2, 3, 4, 5];

private rating: number=3;

}

 

 app.component.ts code as follows

 

 

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app';

}

 

 

app.module.ts code as follows

 

 

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {FormsModule} from '@angular/forms'

import {RatingComponent } from './shared/components/rating.component';

import { AppComponent } from './app.component';

@NgModule({

imports: [ BrowserModule, FormsModule],

declarations: [RatingComponent ],

bootstrap: [ RatingComponent ]

})

export class AppModule { }

 

 

 when i run the above code in browser shows empty screen.

   

     what is the mistake in my above code.

 

  i send my screen shot of empty screen. please do the needful.