How to install the tools

Last Updated On May 06, 2021
You are here:
< Back

For any problems please contact us via the support section. If you don’t want to install the tools or to build the app you can ask now do to it for you: Purchase a Building service

To build the app you need some tools:

  • Webstorm: Download (30 days free Trial) or another IDE for Ionic (Eg. Visual Studio). You can also edit the code with a simple software as Notepad, but an IDE is easier.
  • Angular and Ionic: run these commands on your terminal (Command Line/Shell)

All those commands below must be written in the terminal: 

npm install -g @angular/cli 
npm install -g ionic 
npm install -g cordova@8.1.2

Then navigate inside your project directory if you’re using a separate terminal window or navigate in the root folder if inside your IDE and write: 

npm install
ionic cordova platform add ios@latest
ionic cordova platform add android

You can test your app on a browser with:

ng serve

then open the browser to the address http://localhost:4200
Some features are not available in the browser.

If the console shows you error like: could not find module “@ionic/angular-toolkit just install the missing module manually with:

npm install @ionic/angular-toolkit

If the console shows you error like: failed to restore plugin “cordova-plugin-ionic-webview” from config.xml. You might need to try adding it again. just install the missing module manually with:

ionic cordova plugin add cordova-plugin-ionic-webview

Check here the most common errors.

Our environment

Here you can see our environment:

(Result of ionic info command)


Ionic:

   Ionic CLI                     : 5.4.4 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 8.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.8.1)
   native-run  : 0.2.8 (update available: 0.3.0)

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.11.3
   OS         : macOS Catalina
   Xcode      : Xcode 11.3 Build version 11C29

10 thoughts on “How to install the tools”

  1. Hi there,

    We get this error when we try to serve the app with “ng serve”

    E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code>ng serve
    Your global Angular CLI version (8.3.21) is greater than your local
    version (7.3.8). The local Angular CLI version is used.

    To disable this warning use “ng config -g cli.warnings.versionMismatch false”.
    Schema validation failed with the following errors:
    Data path “.builders[‘app-shell’]” should have required property ‘class’.
    Error: Schema validation failed with the following errors:
    Data path “.builders[‘app-shell’]” should have required property ‘class’.
    at MergeMapSubscriber.project (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\@angular\cli\node_modules\@angular-devkit\core\src\workspace\workspace.js:215:42)
    at MergeMapSubscriber._tryNext (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\operators\mergeMap.js:69:27)
    at MergeMapSubscriber._next (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\operators\mergeMap.js:59:18)
    at MergeMapSubscriber.Subscriber.next (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\Subscriber.js:67:18)
    at MergeMapSubscriber.notifyNext (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\operators\mergeMap.js:92:26)
    at InnerSubscriber._next (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\Subscriber.js:67:18)
    at MapSubscriber._next (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\operators\map.js:55:26)
    at MapSubscriber.Subscriber.next (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\Subscriber.js:67:18)
    at SwitchMapSubscriber.notifyNext (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\operators\switchMap.js:86:26)
    at InnerSubscriber._next (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\Subscriber.js:67:18)
    at E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\util\subscribeTo.js:17:28
    at Object.subscribeToResult (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\util\subscribeToResult.js:10:45)
    at SwitchMapSubscriber._innerSub (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\operators\switchMap.js:65:54)
    at SwitchMapSubscriber._next (E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code\node_modules\rxjs\internal\operators\switchMap.js:55:14)

    E:\theApp\customlistingapp_v1-3-2\Custom Listing App – Ionic Code>

    Reply

    1. Try with running:

      [sudo] npm uninstall -g angular-cli @angular/cli

      npm cache clean

      [sudo] npm install -g @angular/cli@7.3.8

      Reply

  3. Casey-Lessards-MacBook-Pro:1.3.3 caseylessard$ ng serve
    Schema validation failed with the following errors:
    Data path “.builders[‘app-shell’]” should have required property ‘class’.
    Error: Schema validation failed with the following errors:
    Data path “.builders[‘app-shell’]” should have required property ‘class’.
    at MergeMapSubscriber.project (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/@angular/cli/node_modules/@angular-devkit/core/src/workspace/workspace.js:215:42)
    at MergeMapSubscriber._tryNext (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
    at MergeMapSubscriber._next (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
    at MergeMapSubscriber.Subscriber.next (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/Subscriber.js:67:18)
    at MergeMapSubscriber.notifyNext (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
    at InnerSubscriber._next (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/Subscriber.js:67:18)
    at MapSubscriber._next (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/operators/map.js:55:26)
    at MapSubscriber.Subscriber.next (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/Subscriber.js:67:18)
    at SwitchMapSubscriber.notifyNext (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/operators/switchMap.js:86:26)
    at InnerSubscriber._next (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/Subscriber.js:67:18)
    at /Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/util/subscribeTo.js:17:28
    at Object.subscribeToResult (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
    at SwitchMapSubscriber._innerSub (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/operators/switchMap.js:65:54)
    at SwitchMapSubscriber._next (/Users/caseylessard/Projects/SikSik/2019-12/1.3.3/node_modules/rxjs/internal/operators/switchMap.js:55:14)

    Reply

    1. Hi Casey, please don’t say “this doest help” because you have a different error there.
      Try to run these two commands.
      npm uninstall @angular-devkit/build-angular
      npm install @angular-devkit/build-angular@0.13.0

      If you still have problems please open a new support question, in that way we can follow you

      Reply

  5. i have this :

    Mariuss-MacBook-Pro:weby mariusgeageac$ ionic cordova platform add ios@latest
    -bash: ionic: command not found
    Mariuss-MacBook-Pro:weby mariusgeageac$ ionic cordova platform add android
    -bash: ionic: command not found
    Mariuss-MacBook-Pro:weby mariusgeageac$

    Reply

  6. i want to run the app on a localhost

    public static url = ‘localhost:8888’; //change it with your mylisting website

    but i get the error

    Http failure response for localhost:8888/wp-json/custom-listing-app/types: 0 Unknown Error

    Reply

    1. Hi, did you run that website on a real url? mean, localhost is ok, but you need a local server running, can you access that website in your browser? Or can you access it via curl? If you cannot do it, the app cannot do it too.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *