RaschidJFR

import { Directive, Renderer2, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: 'img[ngxImgSpinner]',
  exportAs: 'ngxImgSpinner'
})
export class ImgSpinnerDirective {
  private _loading = true;
  private _error = false;

RaschidJFR

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map, mergeMap, mapTo } from 'rxjs/operators';
import { from } from 'rxjs';

/**
 * Check https://gist.github.com/RaschidJFR/ef9f342bc2549211df7c6f00d1a06237 for the latest version of the script
 * @author Raschid JF Rafaelly <hello&commat;raschidjfr.dev>
 * @example
 *

RaschidJFR

/**
 * ## Angular custom webpack config for compatibility with IE11
 * ------------------------------------------------------------
 * 1. Add this file to your project root. Add the modules list that needs transpiling (see below code).
 * 2. Install dev dependencies:
 *
 *     `$ npm i -D @angular-builders/custom-webpack:browser babel-loader @babel/core @babel/preset-env browserlist`
 *
 * 3. Add this to your `angular.json`:
 *

RaschidJFR

#!/usr/bin/env node
// Use this script to parse version tags from git describe
// Use `node version -h` for help
const { spawn, exec } = require('child_process');
const program = require('commander');

program
  .name('node version')
  .usage('[--describe | --full | --numeric | --prerelease] [--tag <version.tag>]')
  .option('-b, --build', 'Output describe info (without version): <PRE-RELEASE-PHASE(2)>.<PRE-RELEASE-VERSION(2)>.<COMMITS(2)>')

RaschidJFR

// 1. Install Angular Service Worker: `$ ng add @angular/pwa --project app`
// 2. Generate icons: https://app-manifest.firebaseapp.com/
// 3. Add PWA icons for iOS in `index.html`:
//     ```
//     <link rel="apple-touch-icon" sizes="512x512" href="assets/icons/icon-512x512.png">
//     <link rel="apple-touch-icon" sizes="192x192" href="assets/icons/icon-192x192.png">
//     ```
// 4. Configure service worker in `ngsw-config.json`. Don't forget to add missing Ionic .svg files in `assetGroups[].resources.files`.

RaschidJFR

# Add this step to upload sourcemaps to Sentry
# Don't forget to build with `--source-map=true` to generate the sourcemaps.
# It's recommended that you don't upload them to your production hosting
- script: &script-sentry-release
    - npm i @sentry/cli@1.66.0
    - VERSION=$(npm run --silent version:describe)
    - npx sentry-cli --auth-token=$SENTRY_AUTH_TOKEN releases -o $SENTRY_ORG new "$VERSION" --finalize -p $SENTRY_PROJECT
    - npx sentry-cli --auth-token=$SENTRY_AUTH_TOKEN releases -o $SENTRY_ORG set-commits --auto $VERSION # make sure to add the repo in Sentry Dashboard
    - npx sentry-cli --auth-token=$SENTRY_AUTH_TOKEN releases -o $SENTRY_ORG -p $SENTRY_PROJECT files "$VERSION" upload-sourcemaps ./sourcemaps
    - npx sentry-cli --auth-token=$SENTRY_AUTH_TOKEN releases -o $SENTRY_ORG -p $SENTRY_PROJECT files "$VERSION" upload-sourcemaps ./www

RaschidJFR

/**
 * Add the class `emulate-mobile` (programmatically) to `body` to emulate mobile resolution.
 *
 * @example
 * const body = document.getElementsByTagName('body')[0] as HTMLBodyElement;
 * body.classList.add('emulate-mobile');
 */
body.emulate-mobile {
  --marginX: calc(50vw - 180px);
  --marginY: calc(50vh - 320px);

RaschidJFR

Setup for connecting Android Emulatir with live reload to local host PC

How to create a configuration to run with $ ionic cordova emulate android -l -c local and let the emulator connect to host PC, accessing through 10.0.2.2 instead if localhost.

1 angular.json

Create the file environment.local.emulator.ts. Then appli these changes to angular.json.

1. Add this snippet under project.app.architect.build.configurations:

"local-emulator": {

RaschidJFR

Create Apple Developer p12 signing Identity from Windows

Before starting you'll need to install OpenSSL.

1. Generate an RSA key (or use an existing one):

   openssl genrsa -out keyname.key 2048
   

2. Create a certificate signing request (skip all question fields but Country Name, Common Name and Email Address).

RaschidJFR

// This class forces Ionic to show invalid item inputs

.highlight-errors {
  --show-inset-highlight: 1;
  --show-full-highlight: 1;

  ion-item.ion-invalid {
    --highlight-height: 2px;
    --inset-highlight-height: calc(var(--highlight-height) * var(--show-inset-highlight));
    --full-highlight-height: calc(var(--highlight-height) * var(--show-full-highlight));