DEV Community

How to convert an Angular Web App into an Ionic App

Ashok Naik on August 21, 2020

There are scenarios/requirements in Web development when you need to create an Android app of existing Web Applications. For Example: if you have a...

Read full post

Ghassen Khalil Ati • Jan 23 '21

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.

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

Mariel Zamora 🦋 • Jun 3 '21

Hey!! Did you find a solution? tnks

Pablo Da Silva Sena • Feb 2 '21

Hello did you find a solution for this error?

Ghassen Khalil Ati • Feb 2 '21

Not yet unfortunately :(

Julian Franco • Feb 24 '21

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

Ghassen Khalil Ati • Feb 24 '21

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.

Julian Franco • Feb 24 '21 • 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

Ghassen Khalil Ati • Feb 24 '21

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

Ghassen Khalil Ati • Feb 24 '21

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

Mayank Jain • Sep 30 '20

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

Ashok Naik • Sep 30 '20 • Edited

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

Mayank Jain • Oct 2 '20

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

Ashok Naik • Oct 3 '20

Muhammad Wassem Shaz • Oct 13 '20

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

Muhammad Wassem Shaz • Oct 13 '20 • Edited

just wrap base components in ion-content

Scrolling issue resolved

Rich Lira • Sep 24 '21

@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 ??

kapil soni • Jul 19 '22

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?

Aslam sk • Dec 31 '20

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.

Ashok Naik • Jan 24 '21

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

John Peters • Aug 21 '20

Thanks for this post Ashok!

Julián Pérez Pesce • Jan 5 '21

Amazing!!! Thank you