howto – Artyom's Blog

How-to: Use different environment variables for production and development with ionic 3

Create 2 configuration files with environment variables in folder src/config: config.dev.ts and config.prod.ts

export const ENV = {
  API_ENDPOINT: 'https://dev.example.com/api'
};

export const ENV = {

API_ENDPOINT: 'https://dev.example.com/api'

};

export const ENV = {
  API_ENDPOINT: 'https://prod.example.com/api'
};

export const ENV = {

API_ENDPOINT: 'https://prod.example.com/api'

};

Update: For Ionic < 3.7

Override 2 configuration files provided by @ionic/app-scripts package: optimization.config.js and webpack.config.js

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/optimization.config.js');

module.exports = function () {
    useDefaultConfig.resolve.alias = {
        "@environment": path.resolve(__dirname + '/../../src/config/config.' + process.env.IONIC_ENV + '.ts'),
    };
    return useDefaultConfig;
};

var path = require('path');

var useDefaultConfig = require('@ionic/app-scripts/config/optimization.config.js');

module.exports = function () {

useDefaultConfig.resolve.alias = {

"@environment": path.resolve(__dirname + '/../../src/config/config.' + process.env.IONIC_ENV + '.ts'),

};

return useDefaultConfig;

};

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
    useDefaultConfig.resolve.alias = {
        "@environment": path.resolve(__dirname + '/../../src/config/config.' + process.env.IONIC_ENV + '.ts'),
    };
    return useDefaultConfig;
};

var path = require('path');

var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {

useDefaultConfig.resolve.alias = {

"@environment": path.resolve(__dirname + '/../../src/config/config.' + process.env.IONIC_ENV + '.ts'),

};

return useDefaultConfig;

};

Notify ionic to use these overridden files by adding links to them to package.json

"config": {
    "ionic_optimization": "./src/config/optimization.config.js",
    "ionic_webpack": "./src/config/webpack.config.js"
}

"config": {

"ionic_optimization": "./src/config/optimization.config.js",

"ionic_webpack": "./src/config/webpack.config.js"

}

Update: For Ionic >= 3.7

Override webpack.config.js, provided by @ionic/app-scripts package.

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
    useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {
        "@environment": path.resolve(__dirname + '/../../src/config/config.' + process.env.IONIC_ENV + '.ts'),
    };
    return useDefaultConfig;
};

var path = require('path');

var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {

useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {

"@environment": path.resolve(__dirname + '/../../src/config/config.' + process.env.IONIC_ENV + '.ts'),

};

return useDefaultConfig;

};

Notify ionic to use overridden file by adding link to package.json

"config": {
    "ionic_webpack": "./src/config/webpack.config.js"
}

"config": {

"ionic_webpack": "./src/config/webpack.config.js"

}

Instruct TypeScript to use custom alias for a module by editing tsconfig.json

{
  "compilerOptions": {
    //...
    "baseUrl":  "./src",
    "paths": {
      "@environment": ["config/config.prod"]
    }
  },
  //...
}

{

"compilerOptions": {

//...

"baseUrl": "./src",

"paths": {

"@environment": ["config/config.prod"]

}

//...

}

Finally, use your environment variables

import { ENV } from '@environment';

1	import { ENV } from '@environment';

Animations stop working after building project scaffolded by Fountain Webapp Generator

Fix is very quick and clean. In gulp_tasks/build.js pass additional parameters to cssnano:

  return gulp.src(conf.path.tmp('/index.html'))
    .pipe(inject(partialsInjectFile, partialsInjectOptions))
    .pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))
    .pipe(jsFilter)
    .pipe(ngAnnotate())
    .pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
    .pipe(rev())
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    // 8<------ HERE
    .pipe(cssnano({
      reduceIdents: {
        keyframes: false
      },
      discardUnused: {
        keyframes: false
      }
    }))
    // ------>8 HERE
    .pipe(rev())
    .pipe(cssFilter.restore)
    .pipe(revReplace())
    .pipe(sourcemaps.write('maps'))
    .pipe(htmlFilter)
    .pipe(htmlmin())
    .pipe(htmlFilter.restore)
    .pipe(gulp.dest(conf.path.dist()));

return gulp.src(conf.path.tmp('/index.html'))

.pipe(inject(partialsInjectFile, partialsInjectOptions))

.pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))

.pipe(jsFilter)

.pipe(ngAnnotate())

.pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))

.pipe(rev())

.pipe(jsFilter.restore)

.pipe(cssFilter)

// 8<------ HERE

.pipe(cssnano({

reduceIdents: {

keyframes: false

discardUnused: {

keyframes: false

}

}))

// ------>8 HERE

.pipe(rev())

.pipe(cssFilter.restore)

.pipe(revReplace())

.pipe(sourcemaps.write('maps'))

.pipe(htmlFilter)

.pipe(htmlmin())

.pipe(htmlFilter.restore)

.pipe(gulp.dest(conf.path.dist()));

How-to: Display images obtained from cordova-plugin-camera in ionic with live reload

Install cordova-plugin-file.

Obtain file URI from cordova-plugin-camera and convert it to cdvfile://

var options = {
     //...
     destinationType: Camera.DestinationType.FILE_URI
     //...
};

$cordovaCamera.getPicture(options).then(function (fileUri) {

    FileService.convertFileUriToInternalURL(fileUri).then(function(cordovaUri) {

        $scope.ngImgSrc = cordovaUri;

    });

});

var options = {

//...

destinationType: Camera.DestinationType.FILE_URI

//...

};

$cordovaCamera.getPicture(options).then(function (fileUri) {

FileService.convertFileUriToInternalURL(fileUri).then(function(cordovaUri) {

$scope.ngImgSrc = cordovaUri;

});

'use strict';
angular.module('main')
    .service('FileService', function ($log, $q) {

        // Public

        this.convertFileUriToInternalURL = convertFileUriToInternalURL;

        // Private

        // Converts File URI to proper Internal URL that will be used
        // to display local device images while being in LiveReload mode
        function convertFileUriToInternalURL(fileUri) {

            var deferred = $q.defer();

            // Here we use cordova file plugin that resolves fileEntry from fileUri
            window.resolveLocalFileSystemURL(fileUri, onFileResolved, onFileResolveError);

            // This callback used in conjunction with window.resolveLocalFileSystemURL (see above)
            function onFileResolved(fileEntry) {

                deferred.resolve(fileEntry.toInternalURL());
            }

            // This callback used in conjunction with window.resolveLocalFileSystemURL (see above)
            function onFileResolveError() {

                deferred.reject();
            }

            return deferred.promise;
        }

    });

'use strict';

angular.module('main')

.service('FileService', function ($log, $q) {

// Public

this.convertFileUriToInternalURL = convertFileUriToInternalURL;

// Private

// Converts File URI to proper Internal URL that will be used

// to display local device images while being in LiveReload mode

function convertFileUriToInternalURL(fileUri) {

var deferred = $q.defer();

// Here we use cordova file plugin that resolves fileEntry from fileUri

window.resolveLocalFileSystemURL(fileUri, onFileResolved, onFileResolveError);

// This callback used in conjunction with window.resolveLocalFileSystemURL (see above)

function onFileResolved(fileEntry) {

deferred.resolve(fileEntry.toInternalURL());

}

// This callback used in conjunction with window.resolveLocalFileSystemURL (see above)

function onFileResolveError() {

deferred.reject();

}

return deferred.promise;

}

});

How-to: Use angular-templatecache with ionic

From project’s directory execute next command in order to install angular-templatecache

npm install gulp-angular-templatecache --save-dev

1	npm install gulp-angular-templatecache --save-dev

Modify your gulpfile.js

var templateCache = require('gulp-angular-templatecache'); // <-- ADDED

// ...

var paths = {
  sass: ['./scss/**/*.scss'],
  templates: ['./www/templates/**/*.html'] // <-- ADDED
};

// ...

gulp.task('watch', ['sass', 'templates'], function() {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.templates, ['templates']); // <-- ADDED
});

// ...

// ADDED
gulp.task('templates', function(done){
    gulp.src(paths.templates)
        .pipe(templateCache({
            standalone:true,
            root: 'templates'}))
        .pipe(gulp.dest('./www/dist')) // <-- NOTE THIS DESTINATION FOLDER
        .on('end', done);
});

// ADDED
gulp.task('serve:before', ['sass', 'templates', 'watch']); // <-- RUN THESE TASKS WHEN EXECUTING "ionic serve"

var templateCache = require('gulp-angular-templatecache'); // <-- ADDED

// ...

var paths = {

sass: ['./scss/**/*.scss'],

templates: ['./www/templates/**/*.html'] // <-- ADDED

};

// ...

gulp.task('watch', ['sass', 'templates'], function() {

gulp.watch(paths.sass, ['sass']);

gulp.watch(paths.templates, ['templates']); // <-- ADDED

});

// ...

// ADDED

gulp.task('templates', function(done){

gulp.src(paths.templates)

.pipe(templateCache({

standalone:true,

root: 'templates'}))

.pipe(gulp.dest('./www/dist')) // <-- NOTE THIS DESTINATION FOLDER

.on('end', done);

});

// ADDED

gulp.task('serve:before', ['sass', 'templates', 'watch']); // <-- RUN THESE TASKS WHEN EXECUTING "ionic serve"

Don’t forget to reference ‘templates’ dependency in your www/js/app.js

Don’t forget to reference www/js/dist/templates.js in your index.html file.

Start debugging with

ionic serve

1	ionic serve

Run next command to rebuild template cache

gulp templates

1	gulp templates