Charts not working with AoT

[Jonathan Salomon]

I am unable to get the Chart component of the Telerik UI Pro to work with webpack/AoT both on iOS/Android (I am also using the side drawer in the same app which is working just fine). I followed the instructions in the docs for angular and webpack is compiling fine, but the chart just doesn't display (without webpack it works fine).

This is my app.module.ts

import {NgModule, NO_ERRORS_SCHEMA} from "@angular/core";
import {NativeScriptHttpModule} from "nativescript-angular/http";
import {NativeScriptModule} from 'nativescript-angular';
import {NativeScriptFormsModule} from 'nativescript-angular/forms'; // needed for two-way binding in textfields
import {NativeScriptUISideDrawerModule} from 'nativescript-telerik-ui-pro/sidedrawer/angular';
import {NativeScriptUIChartModule} from 'nativescript-telerik-ui-pro/chart/angular';
import {ModalDialogService} from "nativescript-angular/modal-dialog";
import {AppRoutingModule} from "./app.routing";

/* Declarations */
import {AppComponent} from "./app.component";
import {DashboardPage} from './pages/dashboard';
import {DefectsPage} from './pages/defects';
import {DashboardCycleComponent} from './components/dashboard-cycle';
import {DonutChartComponent} from './components/donut-chart';
import {LoginPage} from './pages/login';
import {ProjectContainerPage} from "./pages/project-container";
import {ProjectsOverviewPage} from "./pages/projects-overview";
import {SearchFilterPipe} from './pipes/search-filter';
import {TestStepsReadyPage} from './pages/test-steps-ready';
import {TestStepDetailsPage} from './pages/test-step-details';

/* Providers */
import {BackendProvider} from "./providers/backend";
import {ConfigProvider} from "./providers/config";
import {EventsProvider} from './providers/events';
import {SessionProvider} from "./providers/session";

@NgModule({
  declarations: [
    AppComponent,
    DashboardCycleComponent,
    DashboardPage,
    DefectsPage,
    DonutChartComponent,
    LoginPage,
    ProjectContainerPage,
    ProjectsOverviewPage,
    SearchFilterPipe,
    TestStepsReadyPage,
    TestStepDetailsPage,
  ],
  bootstrap: [AppComponent],
  entryComponents: [
  ],
  imports: [
    AppRoutingModule,
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptUISideDrawerModule,
    NativeScriptUIChartModule
  ],
  providers: [
    BackendProvider,
    ConfigProvider,
    EventsProvider,
    SessionProvider
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

 

This is the component that should display the donut chart:

import {Component,Input} from '@angular/core';
//import {RadPieChartComponent,RadLegendViewDirective} from 'nativescript-telerik-ui-pro/chart/angular';
import {SessionProvider} from '../providers/session';

@Component({
  selector: 'DonutChart',
  template: `
    <RadPieChart height="150" allowAnimation="true" row="1">
      <DonutSeries tkPieSeries selectionMode="DataPoint" [items]="convertCycleDataForPieChart()" valueProperty="value" legendLabel="label"
        outerRadiusFactor="0.9" innerRadiusFactor="0.7" expandRadius="0.1">
      </DonutSeries>
      <RadLegendView tkPieLegend position="Left" offsetOrigin="TopRight" width="150"></RadLegendView>
    </RadPieChart>
  `
})
export class DonutChartComponent {
  @Input() public cycle:any = undefined;
  @Input() private type:string = 'tests'; // possible values: 'tests', 'steps', 'defects', 'issues'

  constructor(private session: SessionProvider) {
  }

  /*
     Convert data from the projectProgress API call to Pie Chart data
  */
  public convertCycleDataForPieChart() {
    console.log('reached convertCycleDataForPieChart');
    let returnArr:Array<any> = [];

    // enumate over all type object keys and create their labels
    for (let key in this.cycle[this.type]) {
      // ensure property name is member of object instead of inherited from prototype chain
      if (this.cycle[this.type].hasOwnProperty(key)) {
        returnArr.push({
          /* PieChart does not support label values on iOS so we add the numbers to the labels */
          label: (this.session.platform==='ios' ? this.cycle[this.type][key]+' ' : '') + key,
          value: this.cycle[this.type][key]
        });
      }
    }
    console.dump(returnArr);
    return returnArr;
  }
}

 

When running the bundle that webpack produces, I do see the 'reached convertCycleDataForPieChart' printed to the console, which seems to indicate that the DonutSeries directive is being processed right? Also the dump of the items data seems to be correct (and the same as with the non-webpack bundle that works properly):

[
        {
            "label": "39 In Progress",
            "value": 39
        },
        {
            "label": "4 Failed",
            "value": 4
        },
        {
            "label": "234 Passed",
            "value": 234
        },
        {
            "label": "890 Out Of Scope",
            "value": 890
        },
        {
            "label": "789 Not Run",
            "value": 789
        }
    ]

 

Any idea what might be going on?

 

Thanks!

[Jonathan Salomon]

Some more info:

$ tns info
All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬─────────────┐
│ Component        │ Current version │ Latest version │ Information │
│ nativescript     │ 2.5.4           │ 2.5.4          │ Up to date  │
│ tns-core-modules │ 2.5.2           │ 2.5.2          │ Up to date  │
│ tns-android      │ 2.5.0           │ 2.5.0          │ Up to date  │
│ tns-ios          │ 2.5.0           │ 2.5.0          │ Up to date  │
└──────────────────┴─────────────────┴────────────────┴─────────────┘

 

{
  "description": "<description>",
  "license": "SEE LICENSE IN LICENSE",
  "readme": "NativeScript Application",
  "repository": "<repo>",
  "nativescript": {
    "id": "com.abhayastudios.testapp",
    "tns-android": {
      "version": "2.5.0"
    },
    "tns-ios": {
      "version": "2.5.0"
    }
  },
  "dependencies": {
    "@angular/common": "2.4.6",
    "@angular/compiler": "2.4.6",
    "@angular/core": "2.4.6",
    "@angular/forms": "2.4.6",
    "@angular/http": "2.4.6",
    "@angular/platform-browser": "2.4.6",
    "@angular/platform-browser-dynamic": "2.4.6",
    "@angular/router": "3.4.6",
    "nativescript-angular": "1.4.1",
    "nativescript-telerik-ui-pro": "file:./nativescript-ui-pro/nativescript-ui-pro.tgz",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-toasts": "^1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.0.1",
    "tns-core-modules": "^2.5.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.6",
    "@ngtools/webpack": "1.2.10",
    "babel-traverse": "6.22.1",
    "babel-types": "6.22.0",
    "babylon": "6.15.0",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~2.1.0",
    "htmlparser2": "~3.9.2",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "~0.3.5",
    "nativescript-dev-webpack": "^0.4.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.0.2",
    "typescript": "~2.1.6",
    "webpack": "~2.3.3",
    "webpack-sources": "~0.2.3",
    "zone.js": "~0.7.2"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "start-android-bundle": "npm run ns-bundle --android --start-app",
    "start-ios-bundle": "npm run ns-bundle --ios --start-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }
}

[Nick Iliev]

Hi Jonathan,

Thank you for providing such detailed information regarding your issue with the charts and AoT!

Indeed I can confirm that this is a known issue caused by s small change in the official webpack plugin, 
The good news is that our developers already introduced a fix in the wrapper plugin which is now tested and will be released with the next version of nativescript-dev-webpack within few days.

Meanwhile, you can take a look at the fix here, and you can also apply it directly in your project changing the respective lines in the generated webpack.common.js file. Note that the change introduced is not different code but a difference in the order of the generated lines.

Regards,
Nikolay Iliev
Telerik by Progress

[Jonathan Salomon]

Hi Nikolay,

Thanks for your quick response. I forgot to mention that I had already found that commit and applied it but it is still not working for me :(

Thanks!

[Jonathan Salomon]

Ahhh wait. I had updated the files in the node_modules but not in the webpack.common.js in the project. I will try that and update!

[Jonathan Salomon]

Indeed after also updating the webpack.common.js in my project it is now working :) I did not notice that it was not updated automatically.

Thanks so much Nikolay!

[Nick Iliev]

Hey Jonathan,

Glad to hear that you have resolved the issue - this is yet another confirmation for us that the fix applied is legit. Yes, at this moment you will have to modify your webpack.common.js manually but this will be fixed with the next release of the plugin. However, even after the plugin yu should verify that the changes are applied to your already existing webpack.common.ts file and apply them manually if needed.

Regards,
Nikolay Iliev
Telerik by Progress