Problem to serve a ionic1 app with installed Ionic CLI V3


#1

Hello all,
I 'm developping an app in ionic V1 on my Windows PC (Ionic CLI 2.2.1, Cordova CLI 7.0.1, Node v4.4.7, Ionic app Lib 2.1.7) : Everything is fine with it.
Now, I want to make it work on my Mac. When I launch command “ionic serve --verbose”, I have no error message, the localhost web page is launched but is white (In safari) . In addition, the “Ionic server commands” part does not start in the console.
On my Mac, I did a git clone & checkout, did run npm install, ionic cordova platform add ios, ionic cordova resources without noticing critical errors.
I’ve been stuck on this problem for hours now, I’m bound to go back to the same CLI version than on my PC. But before that, I would love to understand what is wrong and get the community support. How could it work ?
Thank you very much
Regards
Pascal

Here is my ionic serve (and also ionic info):
ionic serve --verbose

ionic serve --verbose

[DEBUG] CLI flags: { interactive: true, confirm: false }

[DEBUG] { cwd: '/Users/ppe/android/app-ionic', local: true, 

        binPath: '/usr/local/lib/node_modules/ionic/bin/ionic', libPath: 

        '/Users/ppe/android/app-ionic/node_modules/ionic/dist/index.js' 

        }

[DEBUG] Daemon found (pid: 1111)

[WARN] Detected @ionic/cli-plugin-cordova in your package.json.


       As of CLI 3.8, it is no longer needed. You can uninstall it:

       

       npm uninstall -D @ionic/cli-plugin-cordova

       


[WARN] Detected @ionic/cli-plugin-ionic1 in your package.json.


       As of CLI 3.8, it is no longer needed. You can uninstall it:

       

       npm uninstall -D @ionic/cli-plugin-ionic1

       


[WARN] Detected @ionic/cli-plugin-gulp in your package.json.


       As of CLI 3.8, it is no longer needed. You can uninstall it:

       

       npm uninstall -D @ionic/cli-plugin-gulp

       


Starting server (address: 0.0.0.0, port: 8100, dev server port: 53703, 

livereload port: 35729) - Ctrl+C to cancel

Proxy added:/gapi => https://vision.googleapis.com/v1

Proxy added:/2 => https://api.myappserver.fr/2

[DEBUG] Watch patterns: www/**/*, !www/lib/**/*, scss/**/*

[OK] Development server running!

     Local: http://localhost:8100

     External: http://192.168.21.128:8100

     


The IOnic Info on my Mac gives :

cli packages: (/Users/ppe/android/app-ionic/node_modules)


    @ionic/cli-utils  : 1.15.2

    ionic (Ionic CLI) : 3.15.2


global packages:


    cordova (Cordova CLI) : 7.1.0 

    Gulp CLI              : CLI version 3.9.1 Local version 3.9.1


local packages:


    Cordova Platforms : ios 4.5.2

    Ionic Framework   : ionic1 1.3.1


System:


    Node  : v6.11.4

    npm   : 3.10.10 

    OS    : macOS High Sierra

    Xcode : Xcode 9.0.1 Build version 9A1004 


Environment Variables:


    ANDROID_HOME : not set


Misc:


    backend : pro

My ionic.config.json file:

{
  "name": "myAppName",
  "app_id": "myappname.net.mobile",
  "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "proxies": [
    {
      "path": "/gapi",
      "proxyUrl": "https://vision.googleapis.com/v1"
    },
    {
      "path": "/2",
      "proxyUrl": "https://api.myappserver.fr/2"
    }
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*",
    "scss/**/*"
  ],
  "type": "ionic1"
}

And finally my package.json :

{
    "name": "myAppName",
    "version": "1.0.5",
    "description": "myAppName description",
    "dependencies": {
        "@angular/core": "^4.3.1",
        "@ionic-native/core": "^4.0.1",
        "@ionic-native/google-analytics": "^4.2.1",
        "@ionic-native/nfc": "^4.0.1",
        "cordova-android": "^6.3.0",
        "cordova-plugin-app-preferences": "^0.99.3",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-compat": "^1.2.0",
        "cordova-plugin-console": "^1.1.0",
        "cordova-plugin-customurlscheme": "^4.3.0",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-facebook4": "^1.9.1",
        "cordova-plugin-geolocation": "^2.4.3",
        "cordova-plugin-google-analytics": "^1.8.3",
        "cordova-plugin-googleplus": "^5.1.1",
        "cordova-plugin-inappbrowser": "^1.7.1",
        "cordova-plugin-is-debug": "^1.0.0",
        "cordova-plugin-listpicker": "^2.2.2",
        "cordova-plugin-network-information": "^1.3.3",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-plugin-x-socialsharing": "^5.2.0",
        "es6-promise-plugin": "^4.1.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "phonegap-nfc": "^0.7.0",
        "rxjs": "^5.4.2",
        "zone.js": "^0.8.14"
    },
    "devDependencies": {
        "@ionic/cli-plugin-cordova": "1.6.2",
        "@ionic/cli-plugin-gulp": "1.1.1",
        "@ionic/cli-plugin-ionic1": "2.1.1",
        "bower": "^1.3.3",
        "gulp": "^3.9.1",
        "gulp-concat": "^2.2.0",
        "gulp-minify-css": "^0.3.0",
        "gulp-rename": "^1.2.0",
        "gulp-sass": "^3.1.0",
        "gulp-util": "^2.2.14",
        "ionic": "3.7.0",
        "shelljs": "^0.3.0"
    },
    "cordovaPlugins": [
        "cordova-plugin-device",
        "cordova-plugin-console",
        "cordova-plugin-whitelist",
        "cordova-plugin-splashscreen",
        "com.ionic.keyboard"
    ],
    "cordovaPlatforms": [
        "android",
        "ios"
    ],
    "scripts": {
        "start": "gulp && ionic serve"
    },
    "cordova": {
        "plugins": {
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-customurlscheme": {
                "URL_SCHEME": "myappname",
                "ANDROID_SCHEME": " ",
                "ANDROID_HOST": " ",
                "ANDROID_PATHPREFIX": "/"
            },
            "cordova-plugin-app-preferences": {},
            "cordova-plugin-google-analytics": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "phonegap-nfc": {
                "NFC_USAGE_DESCRIPTION": "Read NFC Tags"
            },
            "cordova-plugin-network-information": {},
            "cordova-plugin-compat": {},
            "cordova-plugin-geolocation": {
                "GEOLOCATION_USAGE_DESCRIPTION": " "
            },
            "cordova-plugin-camera": {
                "CAMERA_USAGE_DESCRIPTION": " ",
                "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
            },
            "cordova-plugin-inappbrowser": {},
            "cordova-plugin-device": {},
            "cordova-plugin-console": {},
            "cordova-plugin-listpicker": {},
            "cordova-plugin-facebook4": {
                "APP_ID": "459151487784062",
                "APP_NAME": "myAppName"
            },
           "cordova-plugin-is-debug": {},
            "cordova-plugin-x-socialsharing": {}
        },
        "platforms": []
    }
}

#2

Step 1: Do what it says.


#3

Thank you Sujan, as it was only a Warning I did indeed not removed the 3 elements. It is now done.
But still experience the exact same issue


#4

Do an ‘inspect source’ on the white browser window and look at the console logs. Its possible there is something in your project that conflicts with Safari compared to the browser you are using in Windows. These errors don’t show in the serve logs.


#5

THank you pliablepixels, I’m not sure I got your point :
When showing ELements code : it is bluehighted the following :
<body class="grade-a platform browser platform-macintel platform-ready" ng-app="start">
Nevertheless, what strikes me is that the list of “Ionic server commands” (restart, etc…) is not displayed when starting ionic serve, so I guess this is something wrong at ionic serve level, that I even don’t start my applicable code.


#6

Hi, I mean the ‘console’ tab after you inspect element, not the element tab. DOM errors often show up there and not the terminal. I’m not saying this is what is happening, but its worth checking if you haven’t already.


#7

Yes indeed, the console is empty.