Updating project to App Scripts 1.0.0 failing (using latest ionic and scripts)

Ionic Framework ionic-v3
1

Hi, I have attempted to migrate a project to using Ionic App Scripts 1.0.0 but are having serious issues.

It seems I had to this to get the latest (although I did them in the opposite order).

npm install -g ionic@latest
npm install @ionic/app-scripts@latest

I then had problems with “Error: Cannot find module ‘reflect-metadata’” and in order to update that module I got another error which proved to be that I had an old node version (I am now using 6.9.4). So update Node!

I got an error just as the project was starting up with ionic serve and had to do this to solve that:

npm install --save-dev sw-toolbox

Info about this problem was found here: Ionic2 looking for js file where ts file exists

But I am now stuck at the error when the app is served in the web page with the message:

Cannot find module “localforage”

Here is my system info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.4
Xcode version: Not installed

2

Ok I was able to get rid of the localforage error by upgrading @ionic/storage. But now I have another error when I start it up:

Cannot find module “localforage-cordovasqlitedriver”

I tried upgrading Ionic Framework version from rc.3 to rc.5 - as well as bump angular to 2.2.1 which it then seemed to require. Here is my package.json btw:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "ionic_tmp_dir": ".tmp1",
  "private": true,
  "scripts": {
    "ionic:build": " ionic-app-scripts build",
    "ionic:serve": "  ionic-app-scripts serve",
    "ionic:serve:dev": "node copy-env-config.js --env dev | node copy-proxy-config.js --env dev | ionic-app-scripts serve",
    "ionic:serve:prod": "node copy-env-config.js --env prod | node copy-proxy-config.js --env prod |ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "angular-moment": "^1.0.1",
    "angular2-uuid": "^1.1.0",
    "ionic-angular": "2.0.0-rc.5",
    "ionic-img-cache": "^1.1.1",
    "ionic-native": "^2.2.3",
    "ionicons": "3.0.0",
    "moment": "^2.17.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.0.0",
    "rollup-plugin-replace": "^1.1.1",
    "sw-toolbox": "^3.4.0",
    "typescript": "2.0.6"
  },
  "description": "An Ionic project",
  "cordovaPlugins": [],
  "cordovaPlatforms": []
}

And my info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.4
Xcode version: Not installed
3

Btw I have now also tried upgrading ionic-native to “^2.2.16”, but that did not help. When trying to update rxjs to something higher than 5.0.0-beta.12 I get all kinds of dependency errors.

Getting kinda frustrating to figure out exactly how I can get my project running again. Any help at all is very welcome!

4

Whew! So I was finally able to get it running again. The problem was that the folder node_modules was likely full of old stuff so by just deleting this and running “npm install” with my new package.json updates I was finally able to get it going.

I noticed however that env-configuration.json was not copied/written in www root anymore though so I will have to look into that too. EDIT: This was likely due to one of our own scripts failing (we are using two different configs, one using proxy to reach localhost in web view during development and another going to the live server for prod).

5

Can you provide latest package.json you have used ?

6

Sure. It looks like this:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "ionic_tmp_dir": ".tmp1",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "angular-moment": "^1.0.1",
    "angular2-uuid": "^1.1.0",
    "ionic-angular": "2.0.0-rc.5",
    "ionic-native": "^2.2.16",
    "ionicons": "3.0.0",
    "moment": "^2.17.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.0.0",
    "rollup-plugin-replace": "^1.1.1",
    "sw-toolbox": "^3.4.0",
    "typescript": "2.0.9"
  },
  "description": "An Ionic project",
  "cordovaPlugins": [],
  "cordovaPlatforms": []
}

We plan on adding the cordova plugins to the array there too, as I realize this is the easiest way to set up a project with a single set of ionic commands (npm install and then ionic state restore).