Ionic: not able to do prod build appRate ionic4

Ionic Native
1

I am getting below error, why and how to fix this? : ERROR in src\app\app.module.ts(27,15): Error during template compile of 'AppModule'

S6LlR.jpg978Ă—246

in Vscode its shows like

3vsuU.jpg986Ă—651

Basically, I am trying to add a rating feature in my ionic app. First, I followed this ionic AppRate tutorial

$ ionic cordova plugin add cordova-plugin-apprate
$ npm install --save @ionic-native/app-rate@beta

and in app.modules.ts file i added below code:

import { AppRate } from '@ionic-native/app-rate';
...
...
providers: [  ...
   AppRate, ...  //i added this in this file 
  ],
    ...
    ...

Ionic info enter image description here

2

Hi @ashutosh10g!

The error is telling you that what you’re trying to inject isn’t an Angular service. If you check the AppRate import on line 14, you’ll notice that you’re missing /ngx at the end of the path. This is necessary in Ionic Native 5+, as it now also supports non-Angular projects.

Best,
Rodrigo

1 Like
3

Thanks! now able to do prod build ! Updated as per your suggestion! Now using import { AppRate } from '@ionic-native/app-rate/ngx'; Now My rest of the code is same as above mentioned! Only change in import { AppRate } from '@ionic-native/app-rate/ngx';

But still app rate is not working, I mean the appRate dialog box is not popping up to ask me to Rate now or never. What should i do to make it working! please help! My app is running fine on the mobile phone but without the appRate dialog!
What could be wrong, why appRate dialog is not popping out! is there any bug in ionic 4 with app rate.!

Below is the code for appcomponent.ts file


import { Component } from '@angular/core';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { CacheService } from 'ionic-cache';
import { AppRate } from '@ionic-native/app-rate/ngx';
import { Platform, ToastController  } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  public appPages = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    }, 
    {
      title: 'About ',
      url: '/about',
      icon: 'information'
    },
    {
      title: 'Rate Us',
      url: '/rate',
      icon: 'star'
    }
  ];

  async presentToast(message) {
    const toast = await this.toastController.create({
      message: message,
      duration: 2000,
      animated: true

    });
    toast.present();
  }
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    cache: CacheService,
    public toastController: ToastController,
    private appRate: AppRate,
    private statusBar: StatusBar
  ) {

    cache.setDefaultTTL(60 * 60); // set default cache TTL for 1 hour
    this.initializeApp(); 
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.appRate.preferences = {
         useLanguage: 'en',
        displayAppName: 'Simons App',
        usesUntilPrompt: 2,
        storeAppURL: {
          ios: '1216856883',
          android: 'market://details?id=com.devdactic.crossingnumbers'
        },
        customLocale: {

          appRatePromptTitle: 'Show us some love',
          message: 'Please rate us to help us do better',
          cancelButtonLabel: 'No, Thanks',
          laterButtonLabel: 'Remind Me Later',
          rateButtonLabel: 'Rate It Now'
        },
        callbacks: {
          onRateDialogShow: function(callback) {
            this.presentToast('rate dialog shown!');
            console.log('rate dialog shown!');
          },
          onButtonClicked: function(buttonIndex) {
            this.presentToast('Selected index: -> ' + buttonIndex);
            console.log('Selected index: -> ' + buttonIndex);
          }
        }
      };

      // Opens the rating immediately no matter what preferences you set
      this.appRate.promptForRating(true);
    });
  }
}
4

Your current issue is not related to Ionic but the cordova-plugin-apprate plugin itself.

Check for closed and open issues and see if anybody else is having the same problems in their repo on GitHub: https://github.com/pushandplay/cordova-plugin-apprate

5

Please help me on my new question: https://bit.ly/2UbJyx6