Updated from ionic 4 to 5 ionic cordova android livereload error - Copy Plugin

Question

I am trying to update my angular ionic 4 app to ionic 5. I used the following link:

https://ionicframework.com/docs/reference/migration

npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save

I am getting the following error when trying to do a livereload:

ionic cordova run android -l
[INFO] Hardware device(s) found for android. Using --device.
> ng run app:ionic-cordova-serve --host=localhost --port=8100 --platform=android
[ng] An unhandled exception occurred: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
[ng]  - options[0] misses the property 'patterns'. Should be:
[ng]    [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
[ng] See "/private/var/folders/1k/dwr2csfs5lnfrs7xq7520v_w0000gq/T/ng-OE3Uo3/angular-errors.log" for further details.

[ERROR] ng has unexpectedly closed (exit code 127).
        
        The Ionic CLI will exit. Please check any output above for error details.

I then ran ionic doctor to see if there were any issues. There were not.

What is interesting is that I can successfully build an.apk and run it using ionic cordova build android --prod --release

Even after a successful build the livereload command still fails with the same error.

ionic cordova run android -l

The error does point to a log file for additional information. This is what I found:

error] ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
    at validate (/Users/b/ionic5_apps/ionic5_b-master/node_modules/copy-webpack-plugin/node_modules/schema-utils/dist/validate.js:96:11)
    at new CopyPlugin (/Users/b/ionic5_apps/ionic5_b-master/node_modules/copy-webpack-plugin/dist/index.js:24:30)
    at Object.webpackConfiguration (/Users/b/ionic5_apps/ionic5_b-master/node_modules/@ionic/angular-toolkit/builders/cordova-serve/index.js:55:39)
    at setup (/Users/b/ionic5_apps/ionic5_b-master/node_modules/@angular-devkit/build-angular/src/dev-server/index.js:80:46)
    at processTicksAndRejections (internal/process/task_queues.js:97:5

It points to a number of node_modules:

node_modules/copy-webpack-plugin - version - 6.0.3
node_modules/@ionic/angular-toolkit
node_modules/@angular-devkit

My ionic info is:

   Ionic CLI                     : 6.11.0 (/Users/b/.nvm/versions/node/v12.18.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.803.29
   @angular-devkit/schematics    : 8.3.29
   @angular/cli                  : 8.3.29
   @ionic/angular-toolkit        : 2.3.1

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 10 other plugins)

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   ios-sim : 8.0.2
   NodeJS  : v12.18.3 (/Users/b/.nvm/versions/node/v12.18.3/bin/node)
   npm     : 6.14.7
   OS      : macOS Catalina
   Xcode   : Xcode 11.3.1 Build version 11C504

If I do a npm outdated I see the following:

Package                             Current    Wanted    Latest  Location
@angular-devkit/architect          0.803.29  0.803.29  0.1000.6  b
@angular-devkit/build-angular      0.803.29  0.803.29  0.1000.6  b
@angular-devkit/core                 8.3.29    8.3.29    10.0.6  b
@angular-devkit/schematics           8.3.29    8.3.29    10.0.6  b
@angular/cli                         8.3.29    8.3.29    10.0.6  b
@angular/common                      8.2.14    8.2.14   10.0.11  b
@angular/compiler                    8.2.14    8.2.14   10.0.11  b
@angular/compiler-cli                8.2.14    8.2.14   10.0.11  b
@angular/core                        8.2.14    8.2.14   10.0.11  b
@angular/forms                       8.2.14    8.2.14   10.0.11  b
@angular/language-service            8.2.14    8.2.14   10.0.11  b
@angular/platform-browser            8.2.14    8.2.14   10.0.11  b
@angular/platform-browser-dynamic    8.2.14    8.2.14   10.0.11  b
@angular/router                      8.2.14    8.2.14   10.0.11  b
@ionic-native/app-version            5.27.0    5.28.0    5.28.0  b
@ionic-native/ble                    5.27.0    5.28.0    5.28.0  b
@ionic-native/core                   5.27.0    5.28.0    5.28.0  b
@ionic-native/diagnostic             5.27.0    5.28.0    5.28.0  b
@ionic-native/file                   5.27.0    5.28.0    5.28.0  b
@ionic-native/in-app-browser         5.27.0    5.28.0    5.28.0  b
@ionic-native/insomnia               5.27.0    5.28.0    5.28.0  b
@ionic-native/splash-screen          5.27.0    5.28.0    5.28.0  b
@ionic-native/sqlite                 5.27.0    5.28.0    5.28.0  b
@ionic-native/status-bar             5.27.0    5.28.0    5.28.0  b
@ngrx/effects                         8.6.0     8.6.0    10.0.0  b
@ngrx/store                           8.6.0     8.6.0    10.0.0  b
@ngx-translate/core                  11.0.1    11.0.1    13.0.0  b
@ngx-translate/http-loader            4.0.0     4.0.0     6.0.0  b
@types/jasmine                       3.5.11    3.5.12    3.5.12  b
@types/node                        13.13.15  13.13.15    14.6.0  b
codelyzer                             5.2.2     5.2.2     6.0.0  b
cordova-android                       8.1.0     8.1.0     9.0.0  b
cordova-ios                           5.1.1     5.1.1     6.1.0  b
cordova-plugin-inappbrowser           3.2.0     3.2.0     4.0.0  b
cordova-plugin-ionic-webview          4.2.1     4.2.1     5.0.0  b
cordova-plugin-splashscreen           5.0.4     5.0.4     6.0.0  b
cordova-sqlite-storage                4.0.0     4.0.0     5.0.1  b
cordova.plugins.diagnostic            5.0.2     5.0.2     6.0.2  b
eslint                                6.8.0     6.8.0     7.7.0  b
jasmine-spec-reporter                 4.2.1     4.2.1     5.0.2  b
karma                                 4.4.1     4.4.1     5.1.1  b
karma-coverage-istanbul-reporter      2.1.1     2.1.1     3.0.3  b
karma-jasmine                         3.3.1     3.3.1     4.0.1  b
lodash                              4.17.19   4.17.20   4.17.20  b
protractor                            5.4.4     5.4.4     7.0.0  b
rxjs                                  6.6.0     6.6.2     6.6.2  b
tslib                                1.13.0    1.13.0     2.0.1  b
tslint                               5.20.1    5.20.1     6.1.3  b
typescript                            3.5.3     3.9.7     4.0.2  b
zone.js                               0.9.1     0.9.1    0.11.1  b

UPDATE: I then created a brand new angular based Ionic 5 project.

I then added the cordova android platform with the following command:

ionic cordova platform add android

I run the following command to do a livereload:

ionic cordova run android -l

and still see the error.

I created a repo https://github.com/ASHBAW/test_livereload

Is anyone else seeing this?

Does the repo work on your system?

Any help would be greatly appreciated.

Thanks

Answer 1

The solution (workaround) for me was to rollback the @ionic/angular-toolkit to the previous version, seems to be something up with v2.3.1 .

npm i @ionic/angular-toolkit@2.3.0 -E -D

UPDATE

New version of @ionic/angular-toolkit released which appears to address this problem, try installing the latest instead:

npm i @ionic/angular-toolkit@latest -D