<GridLayout> not rendering


#1

Greetings.

After having an issue with this.userService.login throwing an error, I decided to go right back to the start of the Groceries tutorial and work through it again step by step.

Oddly enough, I’m now getting an issue which didn’t happen my first time through the tutorial. I’m using an iPhone 6 Plus, and I deleted and re-installed both NativeScript Preview and NativeScript Playground, just to make sure that were no old files mucking things up.

The problem is appearing in Lesson 1, Step 2 where I’m directed to copy/paste this code -

import { Component } from “@angular/core”;

@Component({
selector: “my-app”,
template: `

` }) export class AppComponent { favoriteFruits = [ { type: "🍎", count: 7 }, { type: "🍌", count: 15 }, { type: "🍍", count: 12 }, { type: "🍒", count: 30 }, { type: "🍇", count: 16 } ] }

The ActionBar displays ok, but the GridLayout is blank, instead of being a bar chart.

Thanks for any pointers.

Cheers,
Brian


#2

You are setting the template to '' which means nothing will be rendered. You need to either pass in the XML code in that section or reference a file location using the templateUrl property. If you do that, make sure you do it like so:

@Component({
   moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
})
export class AppComponent {
   // Your other code here
}

#3

My original post didn’t show the code properly. Here’s a screen grab that shows things better -

I’m just trying to use the code provided in the tutorial.

Cheers
Brian


#4

Did you import the NativeScriptUIChartModule into your AppModule?

import { NativeScriptUIChartModule } from "nativescript-pro-ui/chart/angular";
@NgModule({
   imports: [NativeScriptUIChartModule]
})
export class AppModule { }

#5

No, I didn’t import anything that wasn’t in the tutorial. Just plain vanilla copy/paste from the Groceries tutorial. Thanks for the suggestion though.

Cheers,
Brian


#6

You need to import that module…


#7

Ok, did that. Then it started throwing an error “app.module.ts (3, 2): Cannot find name ‘NgModule’. Did you mean ‘module’?”. Got rid of that by adding ‘import { NgModule } from “@angular/core”’.

Now I’m getting two runtime errors from the iPhone - “ERROR: ns-renderer: ERROR BOOTSTRAPPING ANGULAR” and “ERROR: ns-renderer: No ErrorHandler. Is platform module (BrowserModule) included?”

Basic problem is this is all getting farther and farther away from the tutorial code which should be working out of the box.

Best regards,
Brian


#8

Can you point me to this tutorial? It could be out of date. Are you familiar with Angular? The import for BrowserModule is:

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

But you should not need that module unless you are doing something not standard.


#9

Hi there.

The link is on the Nativescript Getting Started page at https://docs.nativescript.org/tutorial/chapter-0. The link to the Playground tutorial I’m having trouble with is near the bottom of the page in section 0.3: Installation. The tutorial link is https://play.nativescript.org/?template=groceries-js&tutorial=groceries-js.

After having all the trouble, I abandoned the Playground version of the tutorial, and worked through the CLI version with no issues.

Best regards,
Brian