RSS

Tag Archives: ios

Integrate Ionic in Existing Angular Project

Angular Project

I just finished my project, written in Angular and although it runs on mobile browsers, it needs to be deployed as a native application. The choice is obvious, Ionic.

I’m integrating Ionic for Android development, but it’s optional. You don’t have to prepare your Ionic project for Android development, if you don’t want to. The same concept can also be used to prepare your project for iOS development.

This applies to:

  • Angular 7.
  • Ionic 5.
  • Java SDK 8 update 202.
  • Android SDK 9.0 (API level 28)
  • Android Studio 3.3.2

Here’s my approach integrating Ionic in my Angular project.

Bring-in Ionic

The step includes creating a new project using Ionic CLI, I’m going to refer it as Ionic project while my original Angular project as, well, Angular project.

  • In your Angular project, update all npm packages, to the latest major if you can. This is to avoid version conflict with Ionic project’s npm packages.
  • Start a new Ionic blank project.
    ionic start project-name blank
    
  • Update all npm packages in the newly created Ionic project.
    npm i -g npm-check-updates && ncu -u
    
  • Copy ionic.config.json from Ionic project to Angular project.
  • Copy angular.json from Ionic project to Angular project.
    • If you have specifically changed anything in your angular.json, make that necessary changes in the Angular project after the copy.
    • Ionic uses SCSS for style sheet by default, so if you are not using SCSS, make sure to copy settings under projects/app/architect/**/options/styles from Angular project’s angular.json prior to copy.
    • integrate-ionic-in-angular-project-1
  • Copy package.json from Ionic project to Angular project.
      • If you have specifically changed anything in your package.json (npm scripts, etc), make that necessary changes in the Angular project after the copy.
      • Combine the npm packages from both projects setting under dependencies and devDependencies.
      • integrate-ionic-in-angular-project-2

     

  • Combine .gitignore files from both projects, if you are using Git source control.
  • In Angular project, delete package-lock.json file and node_modules folder. These should be located in root of the project.
  • In Angular project, run npm install command.
    npm install
    
  • Test and make sure everything runs.
    // Test run with Ionic
    ionic serve
    // Test run with Angular
    ng serve --open
    
  • If you want to prepare your project for Cordova, runs the following command. Note that environment setup is required. Please refer to reference section for more details.
    // For Android
    ionic cordova prepare android
    // For iOS
    //ionic cordova prepare ios
    

References

Advertisements
 
Leave a comment

Posted by on March 11, 2019 in General

 

Tags: , , , , , , ,

How to Change iOS App Name in Ionic 3

To change iOS app name in Ionic 3:

  1. Change `name` property in `config.xml`.
  2. Ionic product name change

  3. Then remove iOS platform with Ionic CLI command.
  4. $ ionic cordova platform rm ios
    
  5. Then add iOS platform back.
  6. $ ionic cordova platform add ios
    
  7. Rebuild the project.
 
Leave a comment

Posted by on December 26, 2018 in General

 

Tags: , , ,

Ionic Plugin Camera Crash

If you add Ionic’s native camera plugin and it crashed when opened in iOS device, add following entries in `Info.plist`, see previous post on how to add entries.

  • NSCameraUsageDescription
  • NSPhotoLibraryUsageDescription
  • NSLocationWhenInUseUsageDescription
  • NSPhotoLibraryAddUsageDescription

It’s important to add description, this is iOS requirement when apps try to access users data.

Source.

 
Leave a comment

Posted by on December 26, 2018 in General

 

Tags: , , , , , , , ,

Ionic Plugin Camera Info.plist

To add entries to `Info.plist`, use `edit-config` tag in `config.xml`, for example:

<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
    <string>need camera access to take pictures</string>
</edit-config>

cordova plugin camera crash

To verify, build Ionic for iOS platform, then open project properties in Xcode.
cordova plugin camera crash 2

Source.

 
1 Comment

Posted by on December 26, 2018 in General

 

Tags: , , , , , , ,

Ionic 3 Change App Icon and Splash Screen

The easiest way to change App Icon and Splash screen in Ionic is to let Ionic handle creation of different versions of icon and splash sizes.

When an app first created, there are 2 files in resources folder, icon.png and splash.png.
Screen Shot 2018-06-06 at 1.34.00 AM

Replace these 2 files with your desired icon and splash files.

  • File name must be the same
  • Size of icon.png must be minimum 1024×1024 and splash.png must be minimum 2732×2732

Once icon.png and splash.png files have been replaced. Follow this steps:

  1. You must have FREE Ionic account. This is because the icon and splash generation/transformation is using Ionic server.
  2. On your project folder, run following command: ionic login
  3. Then enter your email and password.
  4. On project folder, run (replace ios with android if you building Android app): ionic cordova resources ios
  5. Ionic will transform your icon and splash files into different versions that your target platform requires.
  6. In the process, config.xml, will also be updated.
 
2 Comments

Posted by on June 5, 2018 in General

 

Tags: , , , , , ,

Change iOS App Id in Ionic

To change iOS App Id in Xcode:

  1. In Project Navigator, click on project name.
  2. Then click on General.
  3. Under Identity, change the Bundle Identifier.

Image 2018-05-06 at 9.44.03 PM

To do the same in Ionic iOS project, follow this step:

  1. In the root folder, find config.xml.
  2. At the beginning of the content, find widget element.
  3. Change widget‘s attribute id.

Image 2018-05-06 at 9.41.47 PM

 

 
Leave a comment

Posted by on May 6, 2018 in General

 

Tags: , , , ,

Ionic ion-nav RootPage’s ionViewDidLoad() Does Not Fire

Ionic navigation provide [root] attribute to set the root page.

MyApp component:

<ion-nav [root]="rootPage"></ion-nav>
export class MyApp {
rootPage: any = StartPage; // This set StartPage as the root page of our app

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

And the StartPage

export class StartPage {
  constructor(private navCtrl: NavController,
              private modalController: ModalController) {
  }

  ionViewDidLoad() {
    console.log('StartPage ionViewDidLoad'); // This does not fire!
  }
}

All works well, except our ionViewDidLoad() in StartPage does not fire!

This is because when we set rootPage properties or present a page with ModalController, class’s constructor and ionViewDidLoad() do not get executed.

It seems like a bug in Ionic framework. For the record this was tested with IOS Simulator on:

  • Ionic Framework 3.8.0
  • Ionic CLI 3.2.0
  • Cordova CLI 7.1.0
  • NPM 3.10.10
  • Node 6.10.3
  • ios-deploy 1.9.2

The Workaround

Insert new page in between MyApp and StartPage, we will call it TransitionPage. Then explicitly set StartPage as the root of NavController.

Continue the code above. This is how modified MyApp look like:

<ion-nav [root]="rootPage"></ion-nav>
export class MyApp {
  rootPage: any = TransitionPage; // Our new transition page

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

This is our new TransitionPage:

export class TransitionPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.navCtrl.setRoot(StartPage); // Manually set StartPage as the root
  }
}

The StartPage does not change, however its ionViewDidLoad() hook now fire as expected.

 

 
Leave a comment

Posted by on May 5, 2018 in General

 

Tags: , , , , , ,

 
%d bloggers like this: