Emulator Shows Nothing But the blank screen


#1

Hey you all!
On my App I use a RadSideBar. It works fine!
I have other 4 pages,all of them work fine.
But I have a page featured where I have a connection with a webApi. the code looks cool, no issues but when i try to open it shows a blank screen and on my output it shows clean code.

WELL, I NEED HELP.
bellow are the files:

featured.component.html

<ActionBar class="action-bar">
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
        ios.position="left">
    </ActionItem>
    <Label class="action-bar-title" text="My Employee List"></Label>
</ActionBar>

<GridLayout rows="auto,auto,*">

       <app-featured-list
       [row]="0">

       </app-featured-list>

</GridLayout>

featured.component.ts

import { Component, OnInit } from "@angular/core";
import {Router} from '@angular/router';
import {FeaturedService} from './shared/featured.service';
import * as app from "application";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import {Color} from 'color';
import {Page} from 'ui/page';

@Component({
    selector: "featured",
    moduleId: module.id,
    templateUrl: "./featured.component.html",
    styleUrls: ["./featured.component.css"],
    providers:[FeaturedService]
    
})
export class FeaturedComponent implements OnInit {

    lista=[];
    data=[];
    constructor(private router: Router,
        private page: Page, private featuredService: FeaturedService) {
        // Use the component constructor to inject providers.
    }

    ngOnInit(){

        this.page.className='list-page';

    
    }


    onDrawerButtonTap(): void {
        const sideDrawer = <RadSideDrawer>app.getRootView();
        sideDrawer.showDrawer();
    }
}

featured.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { featuredRouting } from "./featured.routing.module";
import { FeaturedComponent } from "./featured.component";
import {FeaturedListComponent} from "./featured-list/featured-list.component"

@NgModule({
    imports: [
        NativeScriptCommonModule,
        featuredRouting
    ],
    declarations: [
        FeaturedComponent,
        FeaturedComponent,
        FeaturedListComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class FeaturedModule { }

featured.routing.module.ts

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var router_1 = require("@angular/router");
var featured_component_1 = require("~/app/featured/featured.component");
var featuredRoutes = [
    { path: "featured", component: featured_component_1.FeaturedComponent }
];
exports.featuredRouting = router_1.RouterModule.forChild(featuredRoutes);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVhdHVyZWQucm91dGluZy5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJmZWF0dXJlZC5yb3V0aW5nLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUNBLDBDQUF1RDtBQUV2RCx3RUFBc0U7QUFFdEUsSUFBTSxjQUFjLEdBQVc7SUFDM0IsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxzQ0FBaUIsRUFBRTtDQUNyRCxDQUFDO0FBRVcsUUFBQSxlQUFlLEdBQXVCLHFCQUFZLENBQUMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUsIE1vZHVsZVdpdGhQcm92aWRlcnMgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgUm91dGVzLCBSb3V0ZXJNb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvcm91dGVyXCI7XG5pbXBvcnQgeyBOYXRpdmVTY3JpcHRSb3V0ZXJNb2R1bGUgfSBmcm9tIFwibmF0aXZlc2NyaXB0LWFuZ3VsYXIvcm91dGVyXCI7XG5pbXBvcnQgeyBGZWF0dXJlZENvbXBvbmVudCB9IGZyb20gXCJ+L2FwcC9mZWF0dXJlZC9mZWF0dXJlZC5jb21wb25lbnRcIjtcblxuY29uc3QgZmVhdHVyZWRSb3V0ZXM6IFJvdXRlcyA9IFtcbiAgICB7IHBhdGg6IFwiZmVhdHVyZWRcIiwgY29tcG9uZW50OiBGZWF0dXJlZENvbXBvbmVudCB9XG5dO1xuXG5leHBvcnQgY29uc3QgZmVhdHVyZWRSb3V0aW5nOiBNb2R1bGVXaXRoUHJvdmlkZXJzPSBSb3V0ZXJNb2R1bGUuZm9yQ2hpbGQoZmVhdHVyZWRSb3V0ZXMpOyJdfQ==

featured-list.component.html


<ListView
  [row]="row"
  [class.visible]="listLoaded"
  [items]="store.items">
   <ng-template let-item="item">

    <GridLayout  columns="*, auto" class="container">
  
      <StackLayout   col="0"  orientation="horizontal"  class="tap-target">
        <Label [text]="item.Name"></Label>
      </StackLayout>
    </GridLayout>
  </ng-template>
</ListView>


featured-list.component.ts

import { Component, ChangeDetectionStrategy, EventEmitter, Input, Output, AfterViewInit } from "@angular/core";
import * as utils from "utils/utils";
import { FeaturedService} from "../shared/featured.service";


declare var UIColor: any;

@Component({
  selector: "app-featured-list",
  moduleId: module.id,
  templateUrl: "./featured-list.component.html",
  styleUrls: ["./featured-list.component.css"],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FeaturedListComponent implements AfterViewInit {
  @Input() showDeleted: boolean;
  @Input() row;
  @Output() loading = new EventEmitter();
  @Output() loaded = new EventEmitter();

  public store: FeaturedService;
  listLoaded = false;

  constructor(store: FeaturedService) {
      this.store = store;
  }
  ngAfterViewInit() {
      this.load();
  }
  load() {
    this.loading.next("");
    this.store.load()
      .subscribe(
        () => {
          this.loaded.next("");
          this.listLoaded = true;
        },
        () => {
          alert("An error occurred loading your Featured list.");
        }
      );
  }

 
}


On shared folder
featured.model.ts

export class Featured{
    constructor(
 public  EmployeeID:string,
   public  Name:string,
   public  Position:string
 
   ){}
}

featured.service.ts

import {Injectable, NgZone} from '@angular/core';
import {Featured} from './featured.model';
import {Observable, throwError, BehaviorSubject} from 'rxjs';
import {map,catchError } from 'rxjs/operators';
import{HttpClient, HttpHeaders ,HttpErrorResponse} from '@angular/common/http';
import {BackendService} from '../../shared/BackendService';

@Injectable()

export class FeaturedService {
  [x: string]: any;

  items: BehaviorSubject<Array<Featured>> = new BehaviorSubject([]);

  private allItems: Array<Featured>=[];

 readonly  rootUrl= "http://myUrl";

  constructor (private http: HttpClient, private zone: NgZone){}

  //................methods..............................//

  getFeatured(){
    return this.http.get(this.rootUrl+'/api/Employees', )
  }

  private getCommonHeaders() {
    return new HttpHeaders({
      "Content-Type": "application/json",
      "Authorization": " " + BackendService.token,
    }); 
  }

  load() {
    return this.http.get(this.rootUrl, {
      headers: this.getCommonHeaders()
    })
    .pipe(
      map((data: any[]) => {
        this.allItems = data
          .sort((a, b) => {
            return a._kmd.lmt > b._kmd.lmt ? -1 : 1;
          })
          .map(
            feature => new Featured(
              feature.EmployeeID,
              feature.Name,
              feature.Position
             
          )
        );
        this.publishUpdates();
        
      }),
      catchError(this.handleErrors)
    );
  }
  private handleErrors(error: HttpErrorResponse) {
    console.log(error);
    return throwError(error);
  }

  private publishUpdates() {
    // Make sure all updates are published inside NgZone so that change detection is triggered if needed
    this.zone.run(() => {
      // must emit a *new* value (immutability!)
      this.items.next([...this.allItems]);
    });
  }
}