DEV Community

loading...
Cover image for How to convert an Angular Web App into an Ionic App

How to convert an Angular Web App into an Ionic App

a_shokn profile image Ashok Naik ・2 min read

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....

Discussion (19)

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
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
amarielz profile image
Mariel Zamora 🦋

Hey!! Did you find a solution? tnks

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 Author

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
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 Author • 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
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

Collapse
julianperezpesce profile image
Julián Pérez Pesce

Amazing!!! Thank you

Collapse
jwp profile image
John Peters

Thanks for this post Ashok!

Forem Open with the Forem app