Charts not working with AoT

Thread is closed for posting
7 posts, 0 answers
  1. Jonathan Salomon
    Jonathan Salomon avatar
    27 posts
    Member since:
    Oct 2016

    Posted 26 Apr 2017 Link to this post

    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!

  2. Jonathan Salomon
    Jonathan Salomon avatar
    27 posts
    Member since:
    Oct 2016

    Posted 26 Apr 2017 in reply to Jonathan Salomon Link to this post

    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"
      }
    }
  3. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 26 Apr 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  4. Jonathan Salomon
    Jonathan Salomon avatar
    27 posts
    Member since:
    Oct 2016

    Posted 26 Apr 2017 in reply to Nikolay Iliev Link to this post

    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!

  5. Jonathan Salomon
    Jonathan Salomon avatar
    27 posts
    Member since:
    Oct 2016

    Posted 26 Apr 2017 in reply to Jonathan Salomon Link to this post

    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!
  6. Jonathan Salomon
    Jonathan Salomon avatar
    27 posts
    Member since:
    Oct 2016

    Posted 26 Apr 2017 in reply to Nikolay Iliev Link to this post

    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!

  7. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 27 Apr 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top