How To Build Production and Release Version of Ionic App

To make the production and release version of Android app using Ionic run:

ionic cordova build ios --prod --release

This should run the same as the expanded version:

ionic cordova build ios --minifycss --optimizejs --minifyjs --release

You may need to run with sudo in front of the command if you have permission issues.

For iOS builds the –release flag does not seem to do anything in my testing. I could not find any official documentation explaining what this flag does to iOS builds.

For more detail visit the ionic documentation on building
https://ionicframework.com/docs/cli/commands/cordova-build

JS Infinite Alert Prank Code gets Japanese Girl in Serious Trouble

Ars Technica Reporting:

Explaining her actions, the girl said that she’d run into such pranks herself and thought it would be funny if someone clicked the link.

The Twitter user referenced in the message, 0_Infinity_, has a protected account, but the user left a message in their bio field suggesting that they don’t understand why there’s so much fuss about the script today, as it was written in 2014.

To protest the actions of the Japanese police and the absurdity of calling this act a crime, Tokyo developer Kimikazu Kato has published on GitHub a project called Let’s Get Arrested. Forking the project and then creating a branch named gh-pages will create a simple GitHub-hosted website that contains nothing but the infinitely looped alert, putting criminality at our fingertips.

for ( ; ; ) {
    window.alert(" ∧_∧ ババババ\n( ・ω・)=つ≡つ\n(っ ≡つ=つ\n`/  )\n(ノΠU\n何回閉じても無駄ですよ~ww\nm9(^Д^)プギャー!!\n byソル (@0_Infinity_)")
}

Calling her a criminal is totally absurd.

How To Blur Popup Background in Ionic/Angular

How To Blur Popup Background in Ionic/Angular using manual method:

To achieve this in Ionic 1, you need to set the main div’s class (that is displayed in the background of your popup) to use the blur css class .

CSS:

// css file 

.blur{
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

HTML:

//In your html set the main div of your app to use a dynamic class
 
<div ng-class="blurClass"></div>

JS Controller:


//In JS file set the blur variable to the blur class
 
$scope.blurClass = "blur";

// when done just set the blur to false

$scope.blurClass = false;

How To Open $ionicPopover Popup from Controller

How To Open $ionicPopover from Controller programmatically without a mouse click event:


var self = this; // store reference to 'this' controller object

this.openCustomPopover = function ($event) {

        $event = document.getElementsById('myElementID'); // html element ID 

        $ionicPopover.fromTemplateUrl('popovers/myhtmlpopover.html', {
                scope: $scope
            }).then(function (popover) {
                console.log('in the popover then function');
                self.popover = popover;
                self.popover.show($event);
            });
        }

You can call this function from your controller without a true click event, by faking the $event object.

How to Capture Enter View Event in Directive in Ionic/Angular

How to Capture Page View Enter Event in Directive in Ionic 1 Angular 2?

Directives do not get the normal $ionicView.enter events like controllers. You have to register for the parent view event using $ionicParentView.enter.

$scope.$on("$ionicParentView.enter", function (event, data) {
    // will fire enter event in your directive              
});

Note: Do not import $ionicParentView into your directive, this will cause your code to break.

Good luck!

How to Fix Your Apache setup on macOS Mojave using Brew

Every time Apple releases a major OS it seems to break my web development, so I switched my setup to use Brew which made things even more confusing –at first.

The folder locations might be a little different for you, but the point is: I was editing the wrong file and seeing no results.

Here are a few things to keep in mind when debugging your system issues:

1. There are two instances of Apache if you used brew (one from Apple, and one from Brew), and each is started differently

Brew: sudo brew services restart httpd
macOS: sudo apachectl -k restart

2. This also means I was looking at wrong httpd.conf files, there are multiple ones:

Brew: /usr/local/etc/httpd/httpd.conf
macOS: private/etc/apache2/httpd.conf

3. I also have different installation of php libraries now that I switched to Brew

(installed with brew install php@7.3)

Brew: /usr/local/etc/php/7.3/php.ini
macOS: /Library/Server/Web/Config/php/php.ini

Apple overwrites your httpd.conf file when upgrading the system, but it saves an old version, you just have to rename it.

Great instructions how to setup Apache on Mac using Brew ->
Setup Apache on Mac

Another good article how to Setup apache and php on macOS Mojave -> Apache on Mojave with multiple versions

Creating and Opening PDF on Ionic 1 on iOS

Recently I ran into an issue using the PdfMake on Ionic 1 on iOS. It works fine on the browser with a simple download or open command but not on the actual device.

Install the cordova libraries:

cordova.plugins.fileOpener2
cordova-plugin-file

Download the pdfmake javascript files and include them in your index.html

<script src='build/pdfmake.min.js'></script>
<script src='build/vfs_fonts.js'></script>

The code:

  var self = this ; // defined on top of the file

  var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };

            self.pdfObj = pdfMake.createPdf(docDefinition);

            if (window.cordova) {
                self.pdfObj.getBuffer(function (buffer) {
                    var blob = new Blob([buffer], { type: 'application/pdf' });
                    // Save the PDF to the data Directory of our App
                    $cordovaFile.writeFile(cordova.file.dataDirectory, 'myletter.pdf', blob, { replace: true }).then(function () {
                        // Open the PDf with the correct OS tools
                        cordova.plugins.fileOpener2.open(cordova.file.dataDirectory + 'myletter.pdf', 'application/pdf');
                    })
                });
            }

Setup Config.xml

In your config.xml make sure you have the file settings

<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="iosPersistentFileLocation" value="Library" />

Ionic HTTP posts don’t work on iOS

I ran into this strange problem today where HTTP requests stopped working on iOS alone. Even though I have the latest Ionic CLI, my project was running Ionic 1 still.

To solve this http error I removed this plugin:

ionic cordova plugin remove cordova-plugin-ionic-webview

And added this to config.xml:

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

Probably a bit unsafe to allow everything but had to get it working again.
If this doesn’t work for you try to also remove the iOS platform and re-add it.

good luck~

How To Embed and Open PDF files in Ionic App on iOS

This is a solution for storing and opening pdf files inside your app for offline use.

  cordova.plugins.fileOpener2.open(
        cordova.file.applicationDirectory + 'www/img/sample.pdf',
        'application/pdf',
        {
          error: function (e) {
            console.log('Error status:'+e.status+'- Error message:'+ e.message);
          },
          success: function () {
            console.log('file opened successfully');
          }
        }
      );

Opening the pdf should be fairly simple using the cordova.plugins.fileOpener2 plugin, but I ran into a strange issue because my app name in the config.xml contained a space such as: <name>My App</name>. This caused the iOS to misread the file path. Removing this space in the app name fixed the file path on iOS.

I put the sample pdf doc in the ionic project under my images folder www/img/sample.pdf.

Good luck!

Angular ng-show in ng-repeat not working in Ionic

The official Angular Docs Page for ng-show does not explain how to use this within a repeater.

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

The common mistake when using ng-show in repeater (ng-repeat) is the usage of angular brackets {{}}

  1. This example won’t work if the div is in a repeater:

<div ng-show="{{value == othervalue}}">

Use This Instead:

<div ng-show="value == othervalue">

Usually the app won’t complain and there won’t be any errors in the console, which makes debugging this edge case so difficult.