This blog post describes the migration of the Drag And Drop Calendar mobile app from Ionic 2 to Ionic 4.


This post is currently the somewhat raw notes that were taken during the migration. We will be adding to and updating this post as time permits, to make it easier to read and find information. But for now we wanted to get it "out there" so that hopefully others who are migrating from Ionic 2 or 3 to Ionic 4 can benefit.


Please leave a comment on this blog post if you have questions.


1. Ran “npm install -g ionic”, which replaced the ionic folder in Users\Mark\AppData\Roaming\npm\node_modules


2. Created blank ionic4 app with "ionic start c:\project\ionic\DragAndDropCalendar blank --type=angular", which ended with message “Your ionic app is ready to go”


3. Manually copied some files over from ionic2 to ionic folder following the example on the official Ionic 4 migration page, but not sure about some files such as ionic.ts, manifest.json, service-worker.js


4. Added angular.json file and src\ from copy from Ionic tabs sample app


5. Tried to run “ionic serve”, but prompted me to install @angular/cli, so clicked “yes” and got errors:

“You are running version v6.11.0 of Node.js, which is not supported by Angular CLI v6.

[ng] The official Node.js version that is supported is 8.9 and greater.

[ng] Please visit to find instructions on how to update Node.js.”


6. Downloaded node version 10.15.0 LTS msi and installed it


7. But then was getting “Cannot find module 'internal/util/types'” when trying any “npm install”


8. So changed npm, npm_cache, and nodejs folders to have “old” suffix, then removed and reinstalled node 10.15.0 LTS, then restarted VS Code, and finally got “npm install” to work


9 Ran “npm install -g ionic cordova” with following results:

“C:\Users\Mark\AppData\Roaming\npm\cordova -> C:\Users\Mark\AppData\Roaming\npm\node_modules\cordova\bin\cordova

C:\Users\Mark\AppData\Roaming\npm\ionic -> C:\Users\Mark\AppData\Roaming\npm\node_modules\ionic\bin\ionic

+ [email protected]

+ [email protected]


10. Ran “ionic serve” again, and received error, so ran “npm install @angular-devkit/build-angular” with following results:

“+ @angular-devkit/[email protected]

- then ran “ionic serve” again and got following error:

“Error: Missing binding C:\Project\ionic\DragAndDropCalendar\node_modules\node-sass\vendor\win32-x64-64\binding.node

[ng] Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 10.x

[ng] Found bindings for the following environments:

[ng]   - Windows 64-bit with Node.js 6.x

[ng] This usually happens because your environment has changed since running `npm install`.

[ng] Run `npm rebuild node-sass`”


11. Ran “npm rebuild node-sass”


12. Ran “ionic serve” again and got following error:

“ERROR in ./src/theme/variables.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/theme/variables.scss)

[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):

[ng] undefined

[ng] ^

[ng]       File to import not found or unreadable: ionic.globals.

[ng]       in C:\Project\ionic\DragAndDropCalendar\src\theme\variables.scss (line 5, column 1)

[ng] ERROR in multi ./src/polyfills.ts ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js

[ng] Module not found: Error: Can't resolve 'C:\Project\ionic\DragAndDropCalendar\src\polyfills.ts' in 'C:\Project\ionic\DragAndDropCalendar'

[ng] ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.2 was found instead.”


13. Created file “src/polyfills.ts” and copied from the Ionic 4 sample app at the URL, and that error was resolved


14. Copied variables.scss code from a Side Menu starter app that I created with the Ionic 4 CLI


15. In package.json, changed typescript from “^3.2.2” to “~3.1.6”, based on version in Side Menu starter app and ionic sample app below, then ran “npm install typescript”, with following result:

“+ [email protected]


16. Ran “ionic serve” again, and received errors about @ionic/angular etc missing, and found that no longer had @ionic folder in node_modules


17. Reran “npm install @ionic/angular”, which added @ionic and @ionic-native folders under node_modules, and gave following result:

“+ @ionic/[email protected]


18. Reran “npm install @ionic/storage” with following result:

“+ @ionic/[email protected]


19. Reran “npm install rrule”, and “npm install @types/rrule” with following result:

“+ [email protected], + @types/[email protected]


20. Ggoogleplus setup: based on information at “”, ran “ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid”, which prompted me with “The config.xml file exists in project. Overwrite?”, so backed up existing contents of file and then clicked yes, and was prompted with “The resources/ directory exists in project. Overwrite?”, clicked No; the contents of config.xml was then wiped out, so pasted it back in, then ran the install again with following result:

“Adding cordova-plugin-googleplus to package.json

Saved plugin info for "cordova-plugin-googleplus" to config.xml”


21. Ran “npm install --save @ionic-native/google-plus” with following result:

“+ @ionic-native/[email protected]


22. Based on info in, changed the import statement and added constructor for GooglePlus, as shown below::

“import { GooglePlus } from '@ionic-native/google-plus/ngx';

constructor(private googlePlus: GooglePlus) { ...}”


23. Ran “npm install rxjs-compat --save”, which put entry for rxjs in package.json, and with following result:

“+ [email protected]


24. Ran “npm install intl”, with following result:

“+ [email protected]


25. Implemented necessary Ionic 4 markup changes from link below throughout app: replaced <ion-navbar> with <ion-toolbar>; <button ion-button> changed to <ion-button>; <ion-buttons end> changed to <ion-buttons slot=”end”>; added <ion-buttons slot=”start”><ion-back-button> to <ion-toolbar>; for <ion-grid> cols changed e.g. col-2 to size=”2”; added <ion-label> inside of <ion-item> when just displaying text; in <ion-item> changed e.g. item-left to slot=”start”; added <ion-label> inside of <ion-item-divider>; for <ion-label> changed stacked to position=”stacked”; added <ion-label> inside of <ion-list-header>; <ion-menu> changed e.g. (ionOpen) to (ionDidOpen); <ion-select> changed child elements from <ion-option> to <ion-select-option>; <ion-list radio-group> changed to <ion-list><ion-radio-group>; <ion-scroll> replaced with <ion-content>


26. Ran “ionic serve” again, and it's now ending in “Compiled Successfully”, with no errors, but still no html is being generated in the app, except for the index.html with the <app-root></app-root> tags; and fortunately main.js in Chrome is including some of my files, but unfortunately seems to be including everything, no lazy loading, i.e. App.Component, Home html and ts, Help, etc.


27. Side Menu starter app opens successfully when run “ionic serve”, so replaced the file in Drag and Drop Calendar with Side Menu app’s version of the file


28. Found that my app has a bunch of errors in the Chrome console for references in index.html to main.css, cordova.js, and manifest.json, which are also not in Side Menu starter app’ss index.html, so commented them out


29. Only error left in Chrome console is use of global in index.js for “intl”, which is imported in calendar.module.ts, so commented out “import ‘intl’” lines, and error went away; however there are lines in polyfills.js above commented-out “import ‘intl’” lines that say “Date, currency, decimal and percent pipes. Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10”, but so far date pipes seem to work fine for Webview in mobile app


30. Now getting Chrome console error “Can't bind to 'loop' since it isn't a known property of 'ion-slides'.”; so temporarily removed attribute “[loop]="true"” from <ion-slides> elements; later changed to set loop = true in options in ts file instead of html, per links and, and seems to work, at least no error in Chrome console; if hadn’t worked on device, maybe could have used “slides.startAutoplay” fix from aam-antonio in link below


31. Getting error in several html files that “Can't bind to 'ngFor' since it isn't a known property of 'th'”, so added import of CommonModule to calendar.module.ts and seems to have fixed it


32. Getting error in some views: “Can't bind to 'ngOutletContext' since it isn't a known property of 'template'.”, and per following link “ngOutletContext has been removed as it was deprecated since v4. Use ngTemplateOutletContext instead of ngOutletContext in angular 5”, so made that change throughout app


33. Getting error “Can't bind to 'content' since it isn't a known property of 'ion-menu'.”, so changed [content]=”content” to just content=”content”


34. Getting errors “Can't bind to 'ngModel' since it isn't a known property of 'ion-list'.” and “Can't bind to 'ngModel' since it isn't a known property of 'ion-checkbox'.”, so added imports of FormsModule from @angular/Forms to app.module.ts and home.module.ts


35. Getting error “NullInjectorError: No provider for GooglePlus!”, so added imports of GooglePlus  from @ionic-native/GooglePlus to app,module and home.module; but then getting error “Unexpected value 'GooglePlus' imported by the module 'AppModule'. Please add a @NgModule annotation.”


36. Per GooglePlus github Issue #519 and Ionic github issue #15135, ran “npm install --save @ionic-native/[email protected]”, and added “/ngx” to end of imports, with results below the links:

“+ @ionic-native/[email protected]


37. Still getting same errors, so tried just “npm install googleplus” without version, with following result:

“+ @ionic-native/[email protected]


38. Still got same errors, but also some warnings. So found links below, first link shows specific GooglePlus usage for Ionic Native, and second link below shows a general entry for Ionic Native plugins in module’s Providers section, instead of Imports section. So made the change to add GooglePlus to providers, and got past the error, and now successfully showing side menu, and also grid layout on a page for the first time, including correct dates on the day cells


39. Now getting the error talked about in GooglePlus github issue #519 “Object(...) is not a function”, and found that I had version 5.1.1 of the plugin installed which is from 2016, so did a npm remove, then “ionic cordova plugin add [email protected] --variable REVERSED_CLIENT_ID=myreversedclientid”, but same error, maybe just due to not being on a device?


40. Also getting several errors “Converting circular structure to JSON”, one of which involves Zones


41. Ran “ionic cordova platform add android”, received “Android project created with [email protected]” and “Saving android@~7.1.4 into config.xml file”


42. Realized cordova plugin version are all the same as in ionic2 version of the app, i.e. they didn’t get updated for Ionic 4, so as with GooglePlus above, updated to beta versions of ionic native and latest plugin using the following commands, and their associated results in quotes below the commands:

ionic cordova plugin add [email protected]

npm install --save @ionic-native/status-bar@beta

“+ @ionic-native/[email protected]

ionic cordova plugin add [email protected]

npm install --save @ionic-native/splash-screen@beta

“+ @ionic-native/[email protected]

ionic cordova plugin add cordova.plugins.diagnostic

npm install --save @ionic-native/diagnostic@beta

“+ @ionic-native/[email protected]

ionic cordova plugin add [email protected]

npm install --save @ionic-native/[email protected]

“+ @ionic-native/[email protected]

(originally installed the default, but was getting error in Issue 2642, said to revert to beta15)

ionic cordova plugin add [email protected]

npm install --save @ionic-native/device@beta

“+ @ionic-native/[email protected]


43. Added “/ngx” to end of import statements for each ionic native plugin above, in all components


44. Ran “ionic cordova run android --verbose”, got error “Error: Could not find module "@ionic/ng-toolkit"”, link below said to replace @ionic/ng-toolkit and @ionic/schematics-angular with @ionic/angular-toolkit in angular.json, which corresponded with the angular.json file in the Side Menu starter app; but then got error “Could not find module "@ionic/angular-toolkit"”, and found that @ionic/angular-toolkit was missing from node_modules but exists in Side Menu starter app, so ran “npm install @ionic/angular-toolkit”, with result:

“+ @ionic/[email protected]


45. Ran “ionic cordova run android --verbose” again, and made more progress including following responses:

“Preparing "Install Android SDK Platform 27 (revision: 3)"”

"Install Android SDK Platform 27 (revision: 3)" ready.

Installing Android SDK Platform 27 in C:\Users\Mark\AppData\Local\Android\sdk\platforms\android-27

"Install Android SDK Platform 27 (revision: 3)" complete.

"Install Android SDK Platform 27 (revision: 3)" finished.



Built the following apk(s):



“Failed to load file:///runtime.js, polyfills.js, styles.js, cordova.js, vendor.js, main.js, assets/icon/favicon.ico”


46. App seems to have installed on phone, but just getting blank white screen


47. Ran npm steps below per the following Ionic CLI issue from 12/2018:

a. npm uninstall -g cordova

b. npm install -g cordova (result: “+ [email protected]”, which was the result of “cordova -v” before rm)
c. ionic cordova platform remove android
d. ionic cordova platform add android (“Android target: android-27...Android project created with [email protected])
e. npm i cordova-plugin-ionic-webview@^2.1.3 (+ [email protected])
f. cordova plugin rm cordova-plugin-ionic-webview (“Plugin "cordova-plugin-ionic-webview" is not present in the project”)
g. cordova plugin add cordova-plugin-ionic-webview (“Installing "cordova-plugin-ionic-webview" for android”)


48. The app loaded on my device, with a grid showing dates and day names, and top menu and side menu


49. Still not getting a prompt to login to Google, and so the grid has no calendar events, and swiping works a little in each direction and only shows Xmas week and week of 1/6/2018 thru 1/13/2018 and following week, with wrong week description sometimes on the top menu, and Add Event button doesn’t work, and radio buttons for calendar mode don’t have grouping, and Settings button doesn’t work


50. Add Event button fires the event handler in, but when gets calendarList from storage, it’s null, so doesn’t load the page, probably due to next set of errors below


51. Getting error below, so removed all references to HomePage in app.component.ts, app.component.html, and app.module.ts, and that got rid of the error, and app load hit my breakpoint in app.component.ts constructor

stack:"Error: Uncaught (in promise): Error: Type HomePage is part of the declarations of 2 modules: AppModule and HomeModule! Please consider moving HomePage to a higher module that imports AppModule and HomeModule. You can also create a new NgModule that exports and includes HomePage then import that NgModule in AppModule and HomeModule.”


52. Now getting error “Error: Uncaught (in promise): Error: Template parse errors:\nCan't bind to 'eventSource' since it isn't a known property of 'calendar'.”, and same error for calendarDate and calendarMode, i.e. all properties of <calendar> element in, so seems like CalendarComponent from calendar.ts is not getting imported, even though calendar.module.ts imports it and includes it in its Declarations and imports and entryComponents, so tried adding CalendarComponent to providers, but same error; turned out the fix was to add an import to home.module.ts for the export class from calendar.module.ts, "NgCalendarModule"


53. Getting error below for ion-datetime, fixed the error by importing CommonModule from @angular/common in home.module

stack:"Error: Uncaught (in promise): Error: Template parse errors:\nCan't bind to 'ngIf' since it isn't a known property of 'ion-datetime'.\n1. If 'ion-datetime' is an Angular component and it has 'ngIf' input, then verify that it is part of this module.\n2. If 'ion-datetime' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.


54. Getting error below, fixed by removing NavParams from Home, Settings, etc.:

stack:"Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -> NavParams]: \n  StaticInjectorError(Platform: core)[HomePage -> NavParams]: \n NullInjectorError: No provider for NavParams!


55. Getting error below; so seems like it’s stepping into Add Event, but can’t set a breakpoint, says undefined breakpoint, maybe due to lazy loading? Try adding “debugger;” line to Add Event code per first link below

Stack:"Error: Uncaught (in promise): TypeError: Cannot read property 'setSeconds' of undefined\nTypeError: Cannot read property 'setSeconds' of undefined\n    at new AddEvent (http://localhost:8080/add-event-add-event-module.js:221:49)\n


56. Getting error below, which was fixed by removing [disabled]="isToday" from Today button

stack:"Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'disabled: undefined'. Current value: 'disabled: true'.\n    at viewDebugError (http://localhost:8080/vendor.js:52393:15)\n at expressionChangedAfterItHasBeenCheckedError


57. Also getting below Object error on GooglePlus, assuming because it’s now trying to call the Google Plus code, fixed error by running “npm install @ionic-native/core@beta”, and it updated from 4.18 to 5.0 beta with following result:

“+ @ionic-native/[email protected]

stack:"Error: Uncaught (in promise): TypeError: Object(...) is not a function\nTypeError: Object(...) is not a function\n    at GooglePlus.push../node_modules/@ionic-native/google-plus/ngx/index.js.GooglePlus.trySilentLogin (http://localhost:8080/vendor.js:75534:137)\n    at HomePage.push../src/app/home/


58. Added line “debugger;” at top of home.ts  and app.component.ts, now consistently stops at breakpoints when first starting the app


59. Getting error when start the app “Application Error - The connection to the server was unsuccessful. (file:///android_asset/www/index.html)”,  tried to comment out links to google api’s and icon.png in index.html but didn’t work, finally “solved” by adding line “<preference name="loadUrlTimeoutValue" value="700000" />” to config.xml per following link


60. Changed Home page to pass eventSource and calendarList to Add Event and Edit Event using new AddEditEventParams service per following link:


61. When calling Google API in getGoogleAccessToken, getting error below, after investigations described below, reallized that the origin in the error below has port 8080, and that the only Approved Javascript Origin I had configured on for Web Client 1 for the Ionic2 version of the app was for port 8000, so added a new allowed origin for 8080, still didn’t work; so tried to change from application/x-www-form-urlencoded to application/json, but then got extra error message in the error below:Response to preflight request doesn't pass access control check”); so removed withCredentials: true, which finally worked, we're now getting events on the Week Agenda view for the first time

Access to XMLHttpRequest at '' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. [http://localhost:8080/home]


62. Maybe could also have used Angular's new HttpClient instead of older Http for requests to the Google API, or replaced with gapi.client.request, which I’m already using for calls to calendar API, in both getGoogleAccessToken and getGoogleAccessTokenUsingRefreshToken; or try changing from Headers to HttpHeaders for Angular 5+; not sure if there was a change to in angular 5+?:  per following link, “Using the Maps JavaScript API that way—by way of a script element to load the library, and then using the google.maps.Map and other google.maps.* methods—is the only supported way. Google intentionally does not allow doing it by way of requests sent with XHR or the Fetch API.”


64. For Lazy Loading, added module.ts file for home, help, and settings pages, and instead of recommended approach of adding app-routing.module.ts file, currently just using the simpler option to include the routes in app.module.ts. with router section as shown in Create Your Routes section of, and similar to example in LazyLoading section of


65. When WeekAgendaView loads, getting errors “The "panend" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.”, also for events tap, press, panstart, panmove; ran “npm install --save hammerjs” (result of “+ [email protected]”),  and added “import 'hammerjs'” to main.ts, which got rid of errors and successfully able to drag and drop on WeekAgendaView ; changes were based on following link which talks about npm installing hammerjs and also using @angular/platform-browser with it, and at the end talks about customizing the directions that the events handle, e.g. maybe can customize pan to only trigger when panning vertically, so doesn’t interfere with horizontal swiping for the slider


66. Edit Event - error when clicking on Event Repeats checkbox when div below it is closed, and also same error on initial load of the app; fixed by moving [(ngModel)] out of all <ion-list> elements, and onto their child form elements, e.g. <ion-radio-group>

stack:"Error: No value accessor for form control with unspecified name attribute\n    at _throwError (http://localhost:8080/vendor.js:58755:11)\n at setUpControl (http://localhost:8080/vendor.js:58665:9)\n    at NgModel.push../node_modules/@angular/forms/fesm5/forms.js.NgModel._setUpStandalone (http://localhost:8080/vendor.js:61393:9)\n    at NgModel.push../node_modules/@angular/forms/fesm5/forms.js.NgModel._setUpControl (http://localhost:8080/vendor.js:61380:37)\n at NgModel.push../node_modules/@angular/forms/fesm5/forms.js.NgModel.ngOnChanges


67. Settings and Help pages - not navigating to pages when click menu items, although no errors are appearing, tried changing from click handler with router called in ts code, to routerDirection and routerLink params in markup, and also tried commenting out menu item’s onDidClose and Open handlers, and still no luck; wound up being fixed by changing the help and settings modules to use the “component” property in the route definition 


Deepika Verma

Nice post, thanks for sharing for Indian ports buyers suppliers details

Deepika Verma

Post a comment