blank screen in android

[racknoris]

I get a blank screen in Android when trying to use GridView element in an empty project. However, when using npm run demo-ng-android, the demo runs perfectly. Also, in iOS it works great in an empty project

Steps to reproduce:

1. tns create emptyProject --ng
2. copy the item folder from the demo to the new project
3. place the code in the modules folder, so the new element could be used
4. tns run android
5. the gridview does not show anything

Could it be something with my settings? I was trying to use tns 5.0.0/5.1.0/4.0.0, none worked

[PeterStaev]

Hey @racknoris , seems something is wrong with your setup. I would suggest you check thoroughly the files like NG modules, etc. and compare those with the ones in the demo project.

[racknoris]

I have tried a couple of times, it still doesn't work

Here are the files I changed from the empty project:

items.component.html

<!--
The template defines the view of the component - what is actually rendered. 
In NativeScript applications the template is defined with XML using NativeScript UI elements. 
It is different from HTML. So instead of <input>, <span>, <div> etc. - we have <TextField>, <Label> and layouts.
The important thing is that although the elements are different - all of the Angular’s template syntax works exactly the same. 
So you can still use template expressions, bindings, templates as well as all the built-in directives.
-->

<!--
The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
http://docs.nativescript.org/ui/action-bar
-->
<ActionBar title="GridView NG" class="action-bar">
</ActionBar>

<!--
The StackLayout stacks UI components on the screen — either vertically or horizontally.
In this case, the StackLayout does vertical stacking; you can change the stacking to
horizontal by applying a orientation="horizontal" attribute to the <StackLayout> element.
You can learn more about NativeScript layouts at https://docs.nativescript.org/ui/layout-containers.

xcore theme, such as p-20, btn, h2, and list-group. You can view a full list of the
class names available for styling your app at https://docs.nativescript.org/ui/theme.
-->
<GridLayout class="page" height="100%" rows="*">
  <GridView row="0" height="100%" [items]="items" colWidth="100" rowHeight="100" orientation="vertical" >
    <ng-template let-item="item"  let-i="index">
      <StackLayout height="100" [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" >
        <Label verticalAlignment="center" [text]="'#' + i + ' ' + item.name" class="list-group-item-text" textWrap="true"></Label>
      </StackLayout>
    </ng-template>
  </GridView>

  <!-- <ListView [items]="items" class="list-group">
    <ng-template let-item="item">
        <Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
            class="list-group-item"></Label>
    </ng-template>
</ListView> -->

</GridLayout>

My app.module.ts:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";

// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from "nativescript-angular/forms";

// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper
// import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";

import { GridViewModule } from "nativescript-grid-view/angular";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        GridViewModule
    ],
    declarations: [
        AppComponent,
        ItemsComponent,
        ItemDetailComponent
    ],
    providers: [],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }

also, my package.json:

{
  "nativescript": {
    "id": "org.nativescript.gridViewAndroid",
    "tns-android": {
      "version": "5.2.1"
    },
    "tns-ios": {
      "version": "5.2.0"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/http": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "nativescript-angular": "~7.2.1",
    "nativescript-grid-view": "^5.0.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.3.0",
    "tns-core-modules": "~5.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~7.2.0",
    "@nativescript/schematics": "~0.5.0",
    "@ngtools/webpack": "~7.2.0",
    "nativescript-dev-typescript": "~0.8.0",
    "nativescript-dev-webpack": "~0.20.0"
  },
  "gitHead": "f548ec926e75201ab1b7c4a3a7ceefe7a4db15af",
  "readme": "NativeScript Application"
}

[racknoris]

Decided to start from the basis: I use tns-template-hello-world-ng as the starter template, and it appears that the default is currently version 5.3.1. What I did is going back to version 5.0.0, and it works.
Will now try to see where exactly it breaks and update here

note for future readers: in order to get the 5.0.0 version of the template-
tns create ngSample --template tns-template-hello-world-ng@5.0.0

[racknoris]

I found that the problem was nativescript-angular above version 7.1.2 - the plugin didn't work on Android for versions 7.2.1/7.2.0

Updated package.json that works:

{
  "nativescript": {
    "id": "org.nativescript.gridViewAndroid",
    "tns-android": {
      "version": "5.2.1"
    },
    "tns-ios": {
      "version": "5.2.0"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/http": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "nativescript-angular": "~7.1.2", // << changed from 7.2.1
    "nativescript-grid-view": "^5.0.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.3.0",
    "tns-core-modules": "~5.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~7.2.0",
    "@nativescript/schematics": "~0.5.0",
    "@ngtools/webpack": "~7.2.0",
    "nativescript-dev-typescript": "~0.8.0",
    "nativescript-dev-webpack": "~0.20.0"
  },
  "gitHead": "f548ec926e75201ab1b7c4a3a7ceefe7a4db15af",
  "readme": "NativeScript Application"
}

@PeterStaev Should I open a new issue for this? Is it still a support issue or a bug?

[PeterStaev]

@racknoris , thanks for the details. I was able to simulate the problem on my end when upgrading the angular deps. I will see what can be done. For the time-being you should downgrade NG deps if this is urgent for your project.

[racknoris]

@PeterStaev no problem
From NativeScript perspective, would it be ok if I just downgrade the nativescript-angular and keep the others in version 7.2.0? I mean, could it cause problems?

[PeterStaev]

@racknoris , afaik the "supported" wait is to have nativescript-angular and @angular/* deps on the same minor version. But you could try.

[racknoris]

@racknoris I see
Ok, thank you

*edit- closed by mistake