Ionic-cli: @ionic/ng-toolkit:cordova-serve unable to add cordova.js to bundle

[ionitron-bot[bot]]

Feature Request

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

/Users/glebmikheev/dokuro/prj/svo/node_modules/ionic
----

Ionic:

   ionic (Ionic CLI)          : 4.0.1
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.6.8
   @angular-devkit/schematics : 0.6.1
   @angular/cli               : 6.0.1
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.4

System:

   Android SDK Tools : 25.2.5
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.3
   NodeJS            : v8.11.1 (/usr/local/bin/node)
   npm               : 5.6.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : /usr/local/Cellar/android-sdk/24.4.1_1/

Describe the Feature Request
Unable to run ng run app:ionic-cordova-serve with cordova.js bundled into app.
(using to run livereload server for customly bundled xcode project)

Describe Preferred Solution
Add flag, or have cordova.js by default in ionic serve

Describe Alternatives
Adding --cordova flag to ionic serve
or
Adding cordova.js to bundle when --platform flag provided with ios/android

[imhoffd]

@glebmachine

There actually is ionic serve --cordova, but it requires a platform:

ionic serve --cordova --platform=android

We won't be adding cordova.js to ionic serve anymore because 1) we don't need to, 2) it was hacky to begin with (we had to shim it for ionic serve dev server), 3) separation of concerns, etc.

[glebmachine]

@dwieeb ionic serve have no --cordova flag in docs.

I've tried to serve with ionic serve --cordova --platform=ios, but no cordova.js in result build.

I took a look into @ionic/ng-tools/ionic-{serve|build}, and find that only build adding cordova.js into webpack config. But, i can't start dev server with build task, cause it have no devServer there.

And at last, i tried to ionic cordova run ios -l --target=iPhone-6s and this task also skip cordova.js and splash-screen don't disappear.

As a result i'm unable to debug cordova plugins interfaces with livereload (every time i should walk through rebuild pipe: build angular app, update sources in platform/ios/www, build ios app and run in simulator. It took about 5 minutes per change, that's so huge time lag(

So, how do properly serve my app right into native build, includes cordova.js and cordova plugins?

[imhoffd]

@glebmachine It's a secret flag. 🤐 I want to document it when we have a proper story for people who wish to use the Ionic livereload server with Cordova but want to handle the device deploy themselves. It will also be useful for Capacitor apps.

Just as a quick FYI, ionic serve for v4 uses the Angular CLI, which uses webpack-dev-server, which doesn't build to files. All app files are in memory, but there may be an (outdated) www/ folder left there. This is unlike in v3, where @ionic/app-scripts uses the www/ folder during serve.

ionic cordova run ios -l (and ionic serve --cordova --platform=ios) should definitely add cordova.js to index.html, otherwise running livereload on Cordova is not possible. Since you're looking into how it works, the code to do that is here and here.

I put <script src="cordova.js"></script> in my index.html just to see what would happen, and it works as well. Maybe I'm not fully understanding the feature request?

[glebmachine]

@dwieeb thank you for wide explanation, will play around and back with details!
Cheers! :beers:

[glebmachine]

I've tried again on blank project, and everything works like a charm, keep digging deeper

[glebmachine]

In my case bundler don't goes to this line 😑

[glebmachine]

So, i added this line to angular.json config manualy, and it's works:

"scripts": [
  ...
  {
    "bundleName": "cordova",
    "input": "platforms/ios/platform_www/cordova.js"
  }
  ...
]

[imhoffd]

There may be a version mismatch in your project for these peer dependencies: https://github.com/ionic-team/ionic-cli/blob/develop/packages/%40ionic/ng-toolkit/package.json#L59-L62

In particular, can you paste the output of npm ls @angular-devkit/build-angular ?

[glebmachine]

You god damn right, thank you so much!)

[imhoffd]

You're welcome! I'm going to close this, but I wonder how we can make it easier for people to know if they have the right versions. I think ng update does a pretty good job of listing out invalid peer dependencies. Perhaps we should document it more.

[glebmachine]

I think better to check on each launch - this will cover most of cases.

[FahadUllahKhan]

There may be a version mismatch in your project for these peer dependencies: https://github.com/ionic-team/ionic-cli/blob/develop/packages/%40ionic/ng-toolkit/package.json#L59-L62

In particular, can you paste the output of npm ls @angular-devkit/build-angular ?

the given link is not working

[imhoffd]

@FahadUllahKhan Thanks for speaking up! New apps should have @ionic/angular-toolkit installed (repo link). The peer dependencies listed in package.json should be fulfilled. npm will warn you during installation and I believe ng update warns as well