Guide: How to update to Ionic 3.X

here : https://github.com/driftyco/ionic-cloud/issues/190

Interesting, thanks!

I used the cloud service some weeks ago and had no problem with Ionic Native 3.0.
Looks like a newly made problem.

Upgraded as per instructions above but have these warnings that I don’t understand.

Any advice? Cheers.

npm WARN @angular/platform-server@4.0.2 requires a peer of @angular/animations@4.0.2 but none was installed.
npm WARN @angular/tsc-wrapped@4.0.2 requires a peer of typescript@^2.1.5 but none was installed.
npm WARN @ngtools/webpack@1.2.8 requires a peer of @angular/compiler@^2.3.1 but none was installed.
npm WARN @ngtools/webpack@1.2.8 requires a peer of @angular/compiler-cli@^2.3.1 but none was installed.
npm WARN @ngtools/webpack@1.2.8 requires a peer of @angular/core@^2.3.1 but none was installed.
npm WARN @ngtools/webpack@1.2.8 requires a peer of @angular/tsc-wrapped@^0.5.0 but none was installed.
npm WARN @ngtools/webpack@1.2.8 requires a peer of webpack@2.2.0 but none was installed.

Please can you confirm what the version should be? I get ionic 2.2.3 (as of #edballsday)

I see no 3.x or -beta?

OK?

2.2.3 is correct. It’s the latest stable version.

Version 3 (of the CLI) is currently in beta.

1 Like

Hi Ionic Team,
do you test your framework before releasing? I’m not able to create a simple application with an additional page - my own page.
I don’t care about the lazy loading stuff - just a simple page that I can navigate to.
If I try to add it to the main module, the compiler says that I need to decorate it with @Component, which of course I do.
I challenge you to create a simple app from scratch with your latest version of the framework and CLI and tell me if you suceeded.

If you’re just wanting to vent, then carry on.

If you want assistance, please post code and the exact error you are seeing, not a paraphrase.

Thanks for the guide!:slight_smile:

1 Like

I get this error when I try execute ionic run android: "StatusBar.java: error: cannot find symbol"
Tried to reinstall the android platform and the cordova-plugin-statusbar but it didn’t help.

I have Android SDK Build-tools V26 installed

This is me system information:
Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.11.0
Xcode version: Not installed

This is my package.json:

{
	"name": "TMS",
	"author": "Adam Galmor",
	"homepage": "http://ionicframework.com/",
	"private": true,
	"scripts": {
		"clean": "ionic-app-scripts clean",
		"build": "ionic-app-scripts build",
		"ionic:build": "ionic-app-scripts build",
		"ionic:serve": "ionic-app-scripts serve"
	},
	"dependencies": {
		"@angular/common": "4.1.3",
		"@angular/compiler": "4.1.3",
		"@angular/compiler-cli": "4.1.3",
		"@angular/core": "4.1.3",
		"@angular/forms": "4.1.3",
		"@angular/http": "4.1.3",
		"@angular/platform-browser": "4.1.3",
		"@angular/platform-browser-dynamic": "4.1.3",
		"@ionic-native/core": "^3.12.1",
		"@ionic-native/push": "^3.12.1",
		"@ionic-native/splash-screen": "^3.12.1",
		"@ionic-native/status-bar": "^3.12.1",
		"@ionic/storage": "2.0.1",
		"chart.js": "2.2.1",
		"cordova-plugin-ms-azure-mobile-apps": "^2.0.0-rc1",
		"ionic-angular": "3.4.2",
		"ionic-native": "^2.9.0",
		"ionicons": "3.0.0",
		"moment": "^2.15.1",
		"ng2-charts": "^1.4.0",
		"reflect-metadata": "^0.1.3",
		"rxjs": "5.4.0",
		"sw-toolbox": "3.6.0",
		"vis": "4.17.0",
		"zone.js": "0.8.12"
	},
	"devDependencies": {
		"@ionic/app-scripts": "1.3.8",
		"typescript": "2.3.4"
	},
	"description": "Time Management System",
	"cordovaPlugins": [
		"cordova-plugin-device",
		"cordova-plugin-console",
		"cordova-plugin-whitelist",
		"cordova-plugin-splashscreen",
		"cordova-plugin-statusbar",
		"ionic-plugin-keyboard",
		"com.cmackay.plugins.googleanalytics",
		"cordova-plugin-inappbrowser",
		{
			"variables": {
				"SENDER_ID": "123123123123"
			},
			"locator": "phonegap-plugin-push"
		}
	],
	"cordovaPlatforms": []
}

I had an old version of the cordova-plugin-statusbar (V2.2.0) on my config.xml, updating to V2.2.3:

removed my errors

1 Like

Little note: when i run ionic cordova build --release --prod i get a error:

Error: ./src/providers/googleAnalyticsProvider.ts
Module build failed: TypeError: Cannot read property 'content' of undefined
    at Object.optimizationLoader (/Users/marcel/Sites/projecten/tt/TimeTable/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)
    at Object.loader (/Users/marcel/Sites/projecten/tt/TimeTable/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js:5:32)
 @ ./src/app/app.component.ngfactory.js 24:0-65
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts

This is only with the --prod param
I needed to downgrade app-scripts to

@ionic/app-scripts@1.3.4

Now the build is successful.

This looks more like a error in your code, you should open a new topic about that to see how you can get that fixed.

It’s already fixed, downgraded to app-scripts@1.3.4
But maybe it helps somebody with the same problem, thats why i posted it.

Downgrading is not a fix. It is a temporary workaround until other stuff breaks because of the old version of app-scripts. There always is a reason when a patch release gets released (as from .4 to current .8).

Check this out.

@LoLStats, I went through all steps per your instruction but when I run ionic serve, just blank screen no errors. Wondering what could be missing. Any input would be appreciated.

BTW, All ionic-native modules have been imported to app/app.module.ts and used as provider

here is package.json:

"dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@ionic-native/app-version": "^4.3.1",
    "@ionic-native/barcode-scanner": "^4.3.1",
    "@ionic-native/ble": "^4.3.1",
    "@ionic-native/calendar": "^4.3.1",
    "@ionic-native/camera": "^4.3.1",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/device": "^4.3.1",
    "@ionic-native/diagnostic": "^4.3.1",
    "@ionic-native/dialogs": "^4.3.1",
    "@ionic-native/geolocation": "^4.3.1",
    "@ionic-native/in-app-browser": "^4.3.1",
    "@ionic-native/keyboard": "^4.3.1",
    "@ionic-native/network": "^4.3.1",
    "@ionic-native/safari-view-controller": "^4.3.1",
    "@ionic-native/screen-orientation": "^4.3.1",
    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "@ionic-native/toast": "^4.3.1",
    "@ionic/storage": "2.0.1",
    "dotenv": "^4.0.0",
    "font-awesome": "^4.7.0",
    "fs-extra": "^4.0.2",
    "ionic-angular": "3.7.1",
    "ionicons": "3.0.0",
    "moment": "^2.15.2",
    "ng-block-ui": "^0.9.0",
    "plist": "^2.1.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "xcode": "^0.9.3",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.0",
    "typescript": "2.3.4"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],

Some additional information. What I noticed, the build process is generating Index.html in www folder as below:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <script data-ionic="inject">
    (function(w){var i=w.Ionic=w.Ionic||{};i.version='3.7.1';i.angular='4.4.3';i.staticDir='build/';})(window);
  </script>

</body>

</html>

Hello Guys, i followed all the streps, and now i’m having this error : NullInjectorError: No provider for Http! I imported the HttpClientModule like you said and it stills not working …

i follow your steps and when i am creating build.
i am getting this error
"…node_module/ionic-native/node_module/rxjs/subject.d.ts line 16"

I am trying to update this app :

And I found many errors such as this :


  [12:08:23]  typescript: C:/app/resturant/src/pages/contact/contact.ts, line: 1
            Module '"C:/app/resturant/node_modules/ionic-angular/index"' has no exported member 'Page'.

       L1:  import {Page, NavController} from 'ionic-angular';

[12:08:23]  typescript: C:/app/resturant/src/pages/cart/cart.ts, line: 1
            Module '"C:/app/resturant/node_modules/ionic-angular/index"' has no exported member 'Page'.

       L1:  import {Page, NavController, Alert, ViewController, Modal} from 'ionic-angular';

[12:08:23]  typescript: C:/app/resturant/src/pages/cart/cart.ts, line: 3
            Cannot find module '../../services/menu-service'.

       L3:  import {CartItem, CartService} from '../../services/menu-service';

[12:08:23]  typescript: C:/app/resturant/src/pages/cart/cart.ts, line: 25
            Property 'create' does not exist on type 'typeof Modal'.

      L24:  checkout(){
      L25:      let modal = Modal.create(MyModal);
      L26:      this.nav.present(modal);

[12:08:23]  typescript: C:/app/resturant/src/pages/cart/cart.ts, line: 26
            Property 'present' does not exist on type 'NavController'.

      L25:      let modal = Modal.create(MyModal);
      L26:      this.nav.present(modal);

[12:08:23]  typescript: C:/app/resturant/src/pages/cart/cart.ts, line: 38
            Property 'create' does not exist on type 'typeof Alert'.

      L38:   let alert = Alert.create({
      L39:       title: 'Confirm Delete',

[12:08:23]  typescript: C:/app/resturant/src/pages/cart/cart.ts, line: 58
            Property 'present' does not exist on type 'NavController'.

      L57:  });
      L58:  this.nav.present(alert);

[12:08:23]  typescript: C:/app/resturant/src/pages/cart/cart.ts, line: 70
            Property 'create' does not exist on type 'typeof Alert'.

      L69:  } else {
      L70:      let alert = Alert.create({
      L71:          title: 'Error',

[12:08:23]  typescript: C:/app/resturant/src/pages/cart/cart.ts, line: 75
            Property 'present' does not exist on type 'NavController'.

      L74:      });
      L75:      this.nav.present(alert);

[12:08:23]  typescript: C:/app/resturant/src/pages/about/about.ts, line: 1
            Module '"C:/app/resturant/node_modules/ionic-angular/index"' has no exported member 'Page'.

       L1:  import {Page, NavController} from 'ionic-angular';

[12:08:23]  typescript: C:/app/resturant/src/pages/menu/menu.ts, line: 1
            Module '"C:/app/resturant/node_modules/ionic-angular/index"' has no exported member 'Page'.

       L1:  import {Page, NavController} from 'ionic-angular';

[12:08:23]  typescript: C:/app/resturant/src/pages/menu/menu.ts, line: 3
            Cannot find module '../../services/menu-service'.

       L3:  import {MenuService, MenuItem, CartService} from '../../services/menu-service';

[12:08:23]  typescript: C:/app/resturant/src/pages/main/main.ts, line: 1
            Module '"C:/app/resturant/node_modules/ionic-angular/index"' has no exported member 'Page'.

       L1:  import {Page, NavController} from 'ionic-angular';

[12:08:23]  typescript: C:/app/resturant/src/pages/home/home.ts, line: 1
            Module '"C:/app/resturant/node_modules/ionic-angular/index"' has no exported member 'Page'.

       L1:  import {Page, NavController} from 'ionic-angular';

Error: The Angular AoT build failed. See the issues above
    at C:\app\resturant\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:232:55
    at step (C:\app\resturant\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
    at Object.next (C:\app\resturant\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
    at fulfilled (C:\app\resturant\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)

How can I make this app runing !?