Issue w/charts in the Angular drawer starter kit


#1

I hit an absolutely bizarre bug today that’s blowing my mind. I had to write this up. Here’s how to recreate this.

Create a new app with the Angular drawer template.

tns create MyApp --template tns-template-drawer-navigation-ng

Replace the app/home/home.component.ts file with the following code.

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

@Component({
    selector: "Home",
    moduleId: module.id,
    template: `
<GridLayout>
    <RadCartesianChart>
        <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>
        <BarSeries tkCartesianSeries [items]="downloadCounts" categoryProperty="month" valueProperty="downloads"></BarSeries>
    </RadCartesianChart>
</GridLayout>
`
})
export class HomeComponent {
    downloadCounts = [
        { month: "Jan", downloads: 123 },
        { month: "Feb", downloads: 456 }
    ]
}

And replace the app.module.ts file with the following code (to add the UI chart import):

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NSModuleFactoryLoader } from "nativescript-angular/router";
import { NativeScriptUIChartModule } from "nativescript-pro-ui/chart/angular";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptUIChartModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

Then run the app. I expect to see the world’s simplest chart. Instead I see a really odd UI on Android and an empty screen on iOS.

Any idea what’s up here? I’d like to report this as a bug but I don’t know what the bug is. This same code works fine in Playground and also using a vanilla NativeScript template. I’m so confused, and any help would be appreciated.

Thanks!


#2

Worth noting that I also tried upgrading the version numbers of everything in the template—Angular version, tns-core-modules version, etc—and the problem is still there.

Yet this exact syntax works fine in an app built with tns create MyApp --ng. I have to be missing something obvious here.


#3

@tjvantoll the template is using lazy loading and the home component is lazily loaded - import the NativeScriptUIChartModule in the lazy loaded module home.module.ts instead in app.module.ts

Demonstration application can be found here


#4

@NickIliev That’s exactly it. Thanks so much! I fooled with this example for hours on Friday but never considered that I might’ve registered the import in the wrong module :stuck_out_tongue:

This is working as expected now so thanks again.