DEV Community

Cover image for How to convert an Angular Web App into an Ionic App
Ashok Naik
Ashok Naik

Posted on

How to convert an Angular Web App into an Ionic App

#angular #typescript #beginners #javascript

There are scenarios/requirements in Web development when you need to create an Android app of existing Web Applications.
For Example: if you have an online eCommerce website you might need an android/ios native app as well.
This Blog Post provides a simple solution to overcome the challenge by converting an Angular Web App into an Ionic Mobile App.

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular and React.

The first step in the process is to create a new Angular project using the CLI ng new my-fullstack-app

Alt Text

Moving into the project directory cd my-fullstack-app/

The second step includes adding Ionic to your newly created angular project which can be done using the following command
ng add @ionic/angular

Alt Text

Once you have successfully added ionic to your project the third and most important step is to initialize your ionic project which can be done using the following command ionic init

Alt Text

Note: Your Ionic project name should be the same as your angular project name. In my case, I have given the same name
my-fullstack-app to both projects

Before creating an android build we need to make some necessary changes like changing the output path from dist to www in the angular.json file
Alt Text

The last change in the index.html file <base href=”/”> to
<base href=”./”>
Alt Text

Now you can use the following command to create an Android apk
ionic cordova run android --project="my-fullstack-app"

Alt Text

Your Ionic App is ready 😎.

Alt Text

Special Thanks to my Broski Abhishek Shergar

That's all folks....

Top comments (21)

Collapse
 
ghassen1khalil profile image
Ghassen Khalil Ati •

Thanks a lot for this simple tutorial.
When following the same command that you used I get this error :

ng run social-carpooling-frontend:ionic-cordova-build --platform=ios
An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/src/webpack/utils/helpers'
Require stack:

  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@ionic/angular-toolkit/builders/utils/index.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@ionic/angular-toolkit/builders/cordova-build/index.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/architect/node/index.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/models/architect-command.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/commands/run-impl.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/schematics/tools/export-ref.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/schematics/tools/index.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/utilities/json-schema.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/models/command-runner.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/lib/cli/index.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/lib/init.js
  • /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/bin/ng See "/private/var/folders/5k/g_71h1hn6m9g1gjsq0wmqpjw0000gn/T/ng-qPXNKu/angular-errors.log" for further details. [ERROR] An error occurred while running subprocess ng.
    ng run social-carpooling-frontend:ionic-cordova-build --platform=ios exited with exit code 127.

    Re-running this command with the --verbose flag may provide more information.
Enter fullscreen mode Exit fullscreen mode

Do you have an idea what could be the issue please ?
Thanks in advance

Collapse
 
amarielz profile image
Mariel Zamora 🦋 •

Hey!! Did you find a solution? tnks

Collapse
 
pablossena profile image
Pablo Da Silva Sena •

Hello did you find a solution for this error?

Collapse
 
ghassen1khalil profile image
Ghassen Khalil Ati •

Not yet unfortunately :(

Thread Thread
 
juliandeveloperfranco profile image
Julian Franco •

try with npm i cordova-ios if u are using platform=ios and npm i cordova-android for platform=android

Thread Thread
 
ghassen1khalil profile image
Ghassen Khalil Ati •

can you please give me the full command ?
When I type npm i cordova-ios run ios --project="social-carpooling-frontend" it adds these packages :

And when I type ionic cordova run ios --project="social-carpooling-frontend" I get this error :

> ng run social-carpooling-frontend:ionic-cordova-build --platform=ios
An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/src/webpack/utils/helpers'
Require stack:
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@ionic/angular-toolkit/builders/utils/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@ionic/angular-toolkit/builders/cordova-build/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/architect/node/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/models/architect-command.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/commands/run-impl.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/schematics/tools/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/utilities/json-schema.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/models/command-runner.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/lib/cli/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/lib/init.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/bin/ng
See "/private/var/folders/5k/g_71h1hn6m9g1gjsq0wmqpjw0000gn/T/ng-jmY1Hs/angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.

        ng run social-carpooling-frontend:ionic-cordova-build --platform=ios exited with exit code 127.

        Re-running this command with the --verbose flag may provide more information.
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
juliandeveloperfranco profile image
Julian Franco • • Edited

First run

npm i cordova-ios

and then

ionic cordova run ios --project="social-carpooling-frontend"

, if u have the same error try to remove node_modules and run:

npm i

, also u can try before with:

ionic cordova prepare ios

Thread Thread
 
ghassen1khalil profile image
Ghassen Khalil Ati •

I am getting the same error :(

 ionic:lib Terminal info: { ci: false, shell: '/bin/zsh', tty: true, windows: false } +0ms
  ionic:lib CLI global options: { _: [ 'cordova', 'prepare', 'ios' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: 'social-carpooling-frontend', '--': [] } +3ms
  ionic:lib:project Project type from config: @ionic/angular (angular) +0ms
  ionic:lib:project Project details: { configPath: '/Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/ionic.config.json', errors: [], context: 'app', type: 'angular' } +0ms
  ionic Context: { binPath: '/usr/local/lib/node_modules/ionic/bin/ionic', libPath: '/usr/local/lib/node_modules/ionic', execPath: '/Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend', version: '5.4.16' } +0ms
  ionic:lib:integrations:cordova:config Loading Cordova Config (config.xml: '/Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/config.xml', package.json: '/Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/package.json') +0ms
  ionic:lib:telemetry Sending telemetry for command: 'ionic cordova prepare' [
  ionic:lib:telemetry   'ios',
  ionic:lib:telemetry   '--verbose',
  ionic:lib:telemetry   '--interactive',
  ionic:lib:telemetry   '--color',
  ionic:lib:telemetry   '--project=social-carpooling-frontend'
  ionic:lib:telemetry ] +0ms
  ionic:lib:build build options: {
  ionic:lib:build   '--': [],
  ionic:lib:build   engine: 'cordova',
  ionic:lib:build   platform: 'ios',
  ionic:lib:build   project: 'social-carpooling-frontend',
  ionic:lib:build   verbose: false,
  ionic:lib:build   configuration: undefined,
  ionic:lib:build   sourcemaps: undefined,
  ionic:lib:build   cordovaAssets: true,
  ionic:lib:build   watch: undefined,
  ionic:lib:build   type: 'angular'
  ionic:lib:build } +0ms
  ionic:lib:hooks Looking for ionic:build:before npm script. +0ms
  ionic:lib:build Looking for ionic:build npm script. +12ms
> ng run social-carpooling-frontend:ionic-cordova-build --platform=ios
  ng:analytics getGlobalAnalytics +0ms
  ng:analytics Client Analytics config found: "c25f10e6-74d2-4ada-bdfa-75edf890a68f" +122ms
  ng:analytics client id: "c25f10e6-74d2-4ada-bdfa-75edf890a68f" +1ms
  ng:analytics getWorkspaceAnalytics +131ms
  ng:analytics Workspace Analytics config found: "0f3cccb0-9088-4221-85c9-16b5cfa99943" +0ms
  ng:analytics client id: "0f3cccb0-9088-4221-85c9-16b5cfa99943" +0ms
  ng:analytics getSharedAnalytics +1ms
  ng:analytics:log pageview dp="/command/run", {"cd1":4,"cd2":2300,"cd3":16,"cd4":12.18} +0ms
  universal-analytics Enqueued pageview ({ ds: 'cli', ua: '(Macintosh; Intel Mac OS X 10_16_3)', ul: 'fr_FR.UTF-8', an: '@angular/cli', av: '9.1.4', aid: 'node v12.18.3', dp: '/command/run', cd1: 4, cd2: 2300, cd3: 16, cd4: 12.18, v: '1', tid: 'UA-8594346-29', cid: '0f3cccb0-9088-4221-85c9-16b5cfa99943', t: 'pageview' }) +0ms
An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/src/webpack/utils/helpers'
Require stack:
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@ionic/angular-toolkit/builders/utils/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@ionic/angular-toolkit/builders/cordova-build/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/architect/node/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/models/architect-command.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/commands/run-impl.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/schematics/tools/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/utilities/json-schema.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/models/command-runner.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/lib/cli/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/lib/init.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/bin/ng
See "/private/var/folders/5k/g_71h1hn6m9g1gjsq0wmqpjw0000gn/T/ng-fgtDWN/angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.

        ng run social-carpooling-frontend:ionic-cordova-build --platform=ios exited with exit code 127.

        Re-running this command with the --verbose flag may provide more information.
  ionic:utils-process onBeforeExit handler: 'process.exit' received +0ms
  ionic:utils-process onBeforeExit handler: running 1 functions +0ms
  ionic:utils-process processExit: exiting (exit code: 127) +47ms
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
ghassen1khalil profile image
Ghassen Khalil Ati •

I am getting the same error :(

 ionic:lib Terminal info: { ci: false, shell: '/bin/zsh', tty: true, windows: false } +0ms
  ionic:lib CLI global options: { _: [ 'cordova', 'prepare', 'ios' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: 'social-carpooling-frontend', '--': [] } +3ms
  ionic:lib:project Project type from config: @ionic/angular (angular) +0ms
  ionic:lib:project Project details: { configPath: '/Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/ionic.config.json', errors: [], context: 'app', type: 'angular' } +0ms
  ionic Context: { binPath: '/usr/local/lib/node_modules/ionic/bin/ionic', libPath: '/usr/local/lib/node_modules/ionic', execPath: '/Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend', version: '5.4.16' } +0ms
  ionic:lib:integrations:cordova:config Loading Cordova Config (config.xml: '/Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/config.xml', package.json: '/Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/package.json') +0ms
  ionic:lib:telemetry Sending telemetry for command: 'ionic cordova prepare' [
  ionic:lib:telemetry   'ios',
  ionic:lib:telemetry   '--verbose',
  ionic:lib:telemetry   '--interactive',
  ionic:lib:telemetry   '--color',
  ionic:lib:telemetry   '--project=social-carpooling-frontend'
  ionic:lib:telemetry ] +0ms
  ionic:lib:build build options: {
  ionic:lib:build   '--': [],
  ionic:lib:build   engine: 'cordova',
  ionic:lib:build   platform: 'ios',
  ionic:lib:build   project: 'social-carpooling-frontend',
  ionic:lib:build   verbose: false,
  ionic:lib:build   configuration: undefined,
  ionic:lib:build   sourcemaps: undefined,
  ionic:lib:build   cordovaAssets: true,
  ionic:lib:build   watch: undefined,
  ionic:lib:build   type: 'angular'
  ionic:lib:build } +0ms
  ionic:lib:hooks Looking for ionic:build:before npm script. +0ms
  ionic:lib:build Looking for ionic:build npm script. +12ms
> ng run social-carpooling-frontend:ionic-cordova-build --platform=ios
  ng:analytics getGlobalAnalytics +0ms
  ng:analytics Client Analytics config found: "c25f10e6-74d2-4ada-bdfa-75edf890a68f" +122ms
  ng:analytics client id: "c25f10e6-74d2-4ada-bdfa-75edf890a68f" +1ms
  ng:analytics getWorkspaceAnalytics +131ms
  ng:analytics Workspace Analytics config found: "0f3cccb0-9088-4221-85c9-16b5cfa99943" +0ms
  ng:analytics client id: "0f3cccb0-9088-4221-85c9-16b5cfa99943" +0ms
  ng:analytics getSharedAnalytics +1ms
  ng:analytics:log pageview dp="/command/run", {"cd1":4,"cd2":2300,"cd3":16,"cd4":12.18} +0ms
  universal-analytics Enqueued pageview ({ ds: 'cli', ua: '(Macintosh; Intel Mac OS X 10_16_3)', ul: 'fr_FR.UTF-8', an: '@angular/cli', av: '9.1.4', aid: 'node v12.18.3', dp: '/command/run', cd1: 4, cd2: 2300, cd3: 16, cd4: 12.18, v: '1', tid: 'UA-8594346-29', cid: '0f3cccb0-9088-4221-85c9-16b5cfa99943', t: 'pageview' }) +0ms
An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/src/webpack/utils/helpers'
Require stack:
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@ionic/angular-toolkit/builders/utils/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@ionic/angular-toolkit/builders/cordova-build/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/architect/node/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/models/architect-command.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/commands/run-impl.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular-devkit/schematics/tools/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/utilities/json-schema.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/models/command-runner.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/lib/cli/index.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/lib/init.js
- /Users/ghassen/Desktop/Dev Workspace/Projects/social-carpooling-frontend/node_modules/@angular/cli/bin/ng
See "/private/var/folders/5k/g_71h1hn6m9g1gjsq0wmqpjw0000gn/T/ng-fgtDWN/angular-errors.log" for further details.
[ERROR] An error occurred while running subprocess ng.

        ng run social-carpooling-frontend:ionic-cordova-build --platform=ios exited with exit code 127.

        Re-running this command with the --verbose flag may provide more information.
  ionic:utils-process onBeforeExit handler: 'process.exit' received +0ms
  ionic:utils-process onBeforeExit handler: running 1 functions +0ms
  ionic:utils-process processExit: exiting (exit code: 127) +47ms
Enter fullscreen mode Exit fullscreen mode
Collapse
 
codejack11 profile image
Mayank Jain •

The scrolling is not working in the app. click action works but can't scroll down. Is there something I can do.

Collapse
 
a_shokn profile image
Ashok Naik • • Edited

Try this in the index.html file ,overflow-scroll="true" this should work


Collapse
 
codejack11 profile image
Mayank Jain •

overflow-scroll="true" is an ionic property how can we use it in index.html

Thread Thread
 
a_shokn profile image
Ashok Naik •
Thread Thread
 
waseemshaz profile image
Muhammad Wassem Shaz •

Nicely done. Do we have solution to "Scrolling" issue?

Thread Thread
 
waseemshaz profile image
Muhammad Wassem Shaz • • Edited

just wrap base components in ion-content

Scrolling issue resolved

Thread Thread
 
richlira profile image
Rich Lira •

@waseemshaz I tried:


The scrolling is working now, but the fragments (#something) and there are some visual errors with the router.

Are we missing some steps @a_shokn ??

Collapse
 
kapilsoni101 profile image
kapil soni •

Hi Ashok,
I have follow above steps and APK installed successfully but in the device is showing blank screen with below error;can you please check and let me know how to fix it?

Image description

Collapse
 
aslamsk profile image
Aslam sk •

i am getting this error

[ERROR] Error while getting native targets for android: No valid Android SDK root found.

    This error occurred while using native-run. You can try running this command with --no-native-run, which will
    revert to using Cordova.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
a_shokn profile image
Ashok Naik •

As the error message itself says "No valid Android SDK root found" can you check your environment variables and setup of the android SDK

Collapse
 
jwp profile image
John Peters •

Thanks for this post Ashok!

Collapse
 
julianperezpesce profile image
Julián Pérez Pesce •

Amazing!!! Thank you

View full discussion (21 comments)

Read next

itamartati profile image

Angular’s Biggest Misconception: "It’s Not Worth Learning Due to Fewer Jobs"

Itamar Tati -

danwalsh profile image

[SOLVED] Vue 3 + TypeScript + Inlay Hint support in NeoVim

Dan Walsh -

garciadiazjaime profile image

React: LinkedIn Access Token in 10 Steps

Jaime -

soheilyr profile image

Class variance authority: A Game changer for Tailwind UI components (NEXT.JS)

Soheil yazdanyar -