16 Mrz

Ionic 3 | Starting with Capacitor

Introduction

Git Repository is here

Installation

Requirements

Working with Ionic and Capacitor needs additional software like node and python.

To separate our development environment from other parts of our system, we will use virtual environments for both parts:

To automatically setup this environment when entering the directory, additionally we will use direnv. Read this post to get more detailled information about direnv.

Setup under Mac OS

Install components

Use Homebrew to install the required components

$ brew install direnv nvm pyenv

Configure direnv

Configure your shell to use direnv. Add the following into your .profile or .bashrc.

eval "$(direnv hook bash)"

Change to your development directory and setup direnv

$ cd 

Use this file as as starter for direnv. Copy the file into the directory with the name .envrc

After saving or creating the file .direnv, you will see the following direnv message:

direnv: error .envrc is blocked. Run `direnv allow` to approve its content.

Just type direnv allow, to use this file

$ direnv allow
direnv: loading .envrc
setup               : nvm        (/.env/nvm)
set default         : nvm        (default)
N/A: version "default -> N/A" is not yet installed.

You need to run "nvm install default" to install it before using it.
set default         : python     (2.7.14)
pyenv: version `2.7.14' not installed
Enabled             : nvm        (0.33.8)
Enabled             : node       (9.7.1)
Enabled             : npm        (5.6.0)
pyenv: version `2.7.14' is not installed (set by /.python-version)
Enabled    
direnv: export +NVM_RC_VERSION ~NVM_DIR         : python     ()

Install additional software components

See the error messages in line 7 and 13? You need to install node and python:

$ nvm install 9.8.0
$ pyenv install 2.7.14

The desired versions are activated by direnv because of this lines in you .envrc

Activate Node
nvm use default --silent

Activate Python
pyenv local $PYTHON_VERSION

Final check

Leave the directory and reenter again, or type direnv reload

direnv: loading .envrc
setup               : nvm        (/.env/nvm)
set default         : nvm        (default)
set default         : python     (2.7.14)
Enabled             : nvm        (0.33.8)
Enabled             : node       (9.8.0)
Enabled             : npm        (5.6.0)
Enabled             : python     (Python 2.7.14)
Enabled             : python2    (Python 2.7.14)
direnv: export ~NVM_DIR

Start with a Ionic template

Ionic 3
$ npm -g install ionic
Create sample app from template and change to the SampleApp directory
$ ionic start SampleApp super --no-link --bundle-id com.example.sampleapp
$ cd SampleApp

Important: Be sure to say NO no when asked for integration of Cordova. We will use Capacitor.

Build your app, we will need the www directory with the web files
$ npm run build
 Add capacitor support
$ npm install --save @capacitor/core @capacitor/cli
$ npx cap init sample-app com.example.myapp
$ npm install -save @capacitor/core
$ npx cap add ios
Build your app
$ npx cap copy
$ npx cap copy ios
$ npx cap open ios

The last command starts Xcode: 

Now, you can build and run your iOS App

18 Feb

Ionic 3 | Troubleshooting

Custom Components

Use ion-* components in a custom component

Create the custom html file, for example with this content

<ion-grid no-padding no-margin class="custom-component">
  <ion-row class="star">
    <ion-col text-center *ngFor="let item of items">
      <button ion-button item-end outline icon-start (click)="itemSelected(item)">
        <ion-icon name='star'></ion-icon>{{ item }}
      </button>
    </ion-col>
  </ion-row>
</ion-grid>

Create a components.module.ts file and add this to the imports:

imports: [
  IonicModule
],

General Build Errors

How to fix TypeError: Cannot read property ‚Private‘ of undefined

$

How to fix TypeError: AppScripts.serve is not a function

$ npm install --save-dev @ionic/app-scripts@latest

How to fix Error: Cannot find module ‚@ionic/app-scripts‘

$ npm install --save-dev @ionic/app-scripts@latest

How to fix Error: Cannot find module ‚@angular/tsc-wrapped/src/tsc‘

$ npm install --save-dev @angular/tsc-wrapped@latest

How to fix Error: Cannot find module ‚@angular/compiler-cli‘

$ npm install --save-dev @angular/compiler-cli@latest

How to fix Error: Cannot read property ‚replace‘ of undefined

Read here for details

$ npm install ios-sim@latest

Or edit line 283 in file lib.js and follow https://github.com/phonegap/ios-sim/pull/213/files

vi platforms/ios/cordova/node_modules/ios-sim/src/lib.js

Change to

list.push(util.format('%s, %s', name_id_map[ filterDeviceName(devicename) ].replace(/^com.apple.CoreSimulator.SimDeviceType./, ''), runtime.replace(/^iOS /, '')));

How to fix Error: spawn EACCES

$ ionic hooks add

How to fix Cannot find variable WebpackJsonp

$

How to fix Class ‚Subject<T>‘ incorrectly extends base class ‚Observable<T>‘. Types of property ‚lift‘ are incompatible

Update your typescript module