Ioinic updated, serve fail, Gulpfile.js can't be found

image

I built my app 6 months ago on ionic2 and was all okay.

My package.json:

{
  "dependencies": {
    "@angular/common": "^2.4.10",
    "@angular/compiler": "^2.4.10",
    "@angular/core": "^2.4.10",
    "@angular/http": "^2.4.10",
    "@angular/platform-browser": "^2.4.10",
    "@angular/platform-browser-dynamic": "^2.4.10",
    "@angular/router": "^2.0.0-rc.2",
    "@ionic/app-scripts": "^1.3.7",
    "es6-shim": "^0.35.3",
    "ionic-angular": "^2.3.0",
    "ionic-native": "^1.3.27",
    "ionicons": "3.0.0",
    "ng2-simple-page-scroll": "^1.0.2",
    "reflect-metadata": "^0.1.10",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@ionic/cli-plugin-gulp": "1.0.1",
    "@ionic/cli-plugin-ionic-angular": "1.3.1",
    "del": "2.2.0",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "2.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "ionic-gulp-tslint": "^1.0.0",
    "run-sequence": "1.1.5",
    "tslint-ionic-rules": "^0.0.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "name": "cow",
  "description": "cow: An Ionic project"
}

now after I updated my ionic, things don’t seem to work.
I dont really know what is gulp, so when i saw the error prompted, I just do what it says and I also update my gulp to the latest.

I also updated my minimatch to 3.0.4, but everytime i tried to install gulp it still throw me the deprecated error message refering to an older version of minimatch.

now I am not sure what was broken with the app that ionic serve wont run it.
Could anyone here tell me how could i fixed this? I need to open up the old ionic 2 project file to fix something up.

if i run:
sudo npm uninstall --save-dev --save-exact @ionic/cli-plugin-gulp@latest

it returns the following warnings:

npm WARN @ionic/app-scripts@1.3.7 requires a peer of @angular/compiler-cli@* but none was installed.
npm WARN @ionic/app-scripts@1.3.7 requires a peer of @angular/tsc-wrapped@* but none was installed.
npm WARN @ionic/app-scripts@1.3.7 requires a peer of sw-toolbox@* but none was installed.
npm WARN @ionic/app-scripts@1.3.7 requires a peer of typescript@* but none was installed.
npm WARN ionic-angular@2.3.0 requires a peer of @angular/compiler-cli@2.4.8 but none was installed.
npm WARN ionic-angular@2.3.0 requires a peer of @angular/forms@2.4.8 but none was installed.
npm WARN ionic-angular@2.3.0 requires a peer of @angular/platform-server@2.4.8 but none was installed.
npm WARN tslint@3.15.1 requires a peer of typescript@>=1.7.3 but none was installed.
npm WARN cow@ No repository field.
npm WARN cow@ No license field.

removed 21 packages in 5.466s

run “ionic serve” again after that, still the same error persist:

Adriande-MacBook-Pro:cow adrianli$ ionic serve
[ERROR] Gulpfile not found: ./gulpfile.js
        You can set the gulpFile attribute in ionic.config.json for custom Gulpfile
        locations, otherwise the default Ionic Gulpfile can be downloaded from
        https://github.com/ionic-team/ionic-app-base/blob/master/gulpfile.js
        
        Or, if you no longer use gulp, you can remove the CLI Gulp Plugin:
        
        npm uninstall --save-dev --save-exact @ionic/cli-plugin-gulp@latest

My ionic info:

global packages:

    @ionic/cli-utils : 1.4.0
    Gulp CLI         : CLI version 3.9.1 Local version 3.9.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-gulp          : 1.0.1
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Ionic Framework                 : ionic-angular 2.3.0

System:

    Node       : v8.0.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : 1.8.6 
    ios-sim    : 5.0.8 
    npm        : 5.0.3 

Post your ionic info please, so we know what we are dealing with.
Have you tried the uninstall command offered (temporarily) to see if it fixes things?

might be a stupid question, what ionic info u mean? I was running ionic 2 when i build the app. it runs okay and i put it up on itunes app store.

I was trying to update it and make a more recent build.

I tried the uninstall command but the same error persist, so that kept me scratching my head…

The one you added to your post. It helps us to understand what software you are running and if there are further problems.

There is Ionic Framework (ionic-angular in package.json) and Ionic CLI (which is installed via npm install -g ionic). [quote=“ultradryan, post:3, topic:94748”]
I was trying to update it and make a more recent build.
[/quote]

What exactly did you do? Update Ionic CLI via npm install?[quote=“ultradryan, post:1, topic:94748”]
[ERROR] Error with ./node_modules/@ionic/app-scripts/package.json file: FILE_NOT_FOUND
[/quote]

This is a problem. Run npm install @ionic/app-scripts please to try fix it and post the output.[quote=“ultradryan, post:3, topic:94748”]
I tried the uninstall command but the same error persist, so that kept me scratching my head…
[/quote]

Same here. Post you packages.json content (after you installed app-scripts) please.

i updated the ionic info in my post, after install @ionic/app-scripts

and the packages.json too.

However The same error still persist

Adriande-MacBook-Pro:cow adrianli$ ionic serve
[ERROR] Gulpfile not found: ./gulpfile.js
        You can set the gulpFile attribute in ionic.config.json for custom Gulpfile
        locations, otherwise the default Ionic Gulpfile can be downloaded from
        https://github.com/ionic-team/ionic-app-base/blob/master/gulpfile.js
        
        Or, if you no longer use gulp, you can remove the CLI Gulp Plugin:
        
        npm uninstall --save-dev --save-exact @ionic/cli-plugin-gulp@latest

Great, now the project at least is “clean”.

  1. Did you download that file and put it into the project root for a test?[quote=“ultradryan, post:5, topic:94748”]
    npm uninstall --save-dev --save-exact @ionic/cli-plugin-gulp@latest
    [/quote]

  2. Looking at package.json this doesn’t seem to have worked. Could you remove that line manually from package.json. then delete node_modules folder and run npm install after that?

  3. Can you also share your package.json before you started updating stuff pleaes?

Yes, it returns the following If I replace my origin gulpfile.js with the downloaded one.

Adriande-MacBook-Pro:cow adrianli$ ionic serve
SyntaxError: Unexpected token <

Now I deleted the line and it looks like this:

{
  "dependencies": {
    "@angular/common": "^2.4.10",
    "@angular/compiler": "^2.4.10",
    "@angular/core": "^2.4.10",
    "@angular/http": "^2.4.10",
    "@angular/platform-browser": "^2.4.10",
    "@angular/platform-browser-dynamic": "^2.4.10",
    "@angular/router": "^2.0.0-rc.2",
    "@ionic/app-scripts": "^1.3.7",
    "es6-shim": "^0.35.3",
    "ionic-angular": "^2.3.0",
    "ionic-native": "^1.3.27",
    "ionicons": "3.0.0",
    "ng2-simple-page-scroll": "^1.0.2",
    "reflect-metadata": "^0.1.10",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@ionic/cli-plugin-ionic-angular": "1.3.1",
    "del": "2.2.0",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "2.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "ionic-gulp-tslint": "^1.0.0",
    "run-sequence": "1.1.5",
    "tslint-ionic-rules": "^0.0.3"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "name": "cow",
  "description": "cow: An Ionic project"
}

The gulpfile.js not found error doesnt appear any more, unless i use my old gulpfile.js file.

The new ly downloaded gulpfile.js persist with this error:

SyntaxError: Unexpected token <

I hope I am doing everything right, I really appreciate your help. Was a bit worry about my effort on building the app all gone.

Try ionic serve --verbose to maybe get more information.

And if you have no gulpfile? Current CLI doesn’t require one for current Ionic projects.

I have no idea what I am doing here as well, just trying to find out what is going on and why by debugging the situation :wink: The gulp plugin is quite new, so very possible you hit some race condition or something. Let’s hope not.

I am completely lost here…

if I dont have a gulpfile.js at all, it returns:

Error: Cannot find module '@angular/tsc-wrapped/src/tsc'

ionic --verbose output:

[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
[DEBUG] Getting plugin info for ionic
[DEBUG] Getting plugin info for @ionic/cli-plugin-proxy
[DEBUG] Getting plugin info for @ionic/cli-plugin-ionic-angular
[DEBUG] Checking for latest plugin version of ionic@latest.
[DEBUG] Checking for latest plugin version of @ionic/cli-plugin-proxy@latest.
[DEBUG] Checking for latest plugin version of @ionic/cli-plugin-ionic-angular@latest.
[DEBUG] Latest version of ionic@latest is 3.4.0.
[DEBUG] Latest version of @ionic/cli-plugin-ionic-angular@latest is 1.3.1.
[DEBUG] Latest version of @ionic/cli-plugin-proxy@latest is 1.3.1.
[DEBUG] !!! ERROR ENCOUNTERED !!!
Error: Cannot find module '@angular/tsc-wrapped/src/tsc'
[DEBUG] Error: Cannot find module '@angular/tsc-wrapped/src/tsc'
        at Function.Module._resolveFilename (module.js:485:15)
        at Function.Module._load (module.js:437:25)
        at Module.require (module.js:513:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous>
        (/Users/adrianli/Desktop/ionic/cow/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:7:13)
        at Module._compile (module.js:569:30)
        at Object.Module._extensions..js (module.js:580:10)
        at Module.load (module.js:503:32)
        at tryModuleLoad (module.js:466:12)
        at Function.Module._load (module.js:458:3)

After some search, i found this article:

Do you think that’s the same issue i am hving here?
I hope it get fixed soon, it’s been 6 months ago since I build the first release of my app, now I really need an update.

Will I be able reopen the project file and build the app from where I left it? I couldn’t really redo everything from scratch, it took me a year to where I was… :weary:
Now I got stuck here.

You can have a look of my app:
https://itunes.apple.com/hk/app/cards-war-suntzu-art-war/id1146875290?mt=8
It’s not making any money i generally give out redeem code for students.

So yeah… do u think it will get fixed soon?

Yeah, that is actually a good thing that you are hitting this new error now - you seem to be over the gulp stuff!

Uninstalling node and getting an older (6.x for example) version should give you an older npm, which will work (if the issue you linked is the actual cause).

You can and should also further cleanup your package.json file by comparing it to e.g. this one here: https://github.com/ionic-team/ionic/releases/tag/v2.2.0 This is quite close to the 2.3.0 of ionic-angular you are using, and these were the versions working back then. Get rid other stuff you didn’t add yourself and are not in the linked package.json, add the stuff still missing from your project. Then you should be able to run your project and think about further upgrading to really current versions.

Is there a clean way of finding out what exactly I hv to included in the package.json? I kind of forget what I added to it.

I use npm init to generate a new one, not sure if it’s ok.

It kept saying a few modules were not found, I managed to actually got a few of them fixed, uninstall and reinstalling a few things, although i m not so sure what’s going on.

now came to this when I run ionic serve:

Error: Cannot find module 'shebang-command'

And I couldnt find anything about that on google, any idea what’s that about?

Is 2.3.0 the latest stable version of ionic? or is there a clean way for me to install the latest stable version and open this project?

This includes all the “necessary” stuff: Release 2.2.0 · ionic-team/ionic-framework · GitHub (Unfortunately this doesn’t seem to exist for 2.3.0 you are using right now - but it should be pretty similar.)
So you could throw the dependencies and devDependencies away and replace it with this, delete node_modules and run npm install. Then run ionic info (Install stuff for the CLI) and then ionic serve to see if it works or what is missing.

I am working on a tool that should help with this, but unfortunately it is not ready yet.

Not, the current version is 3.4.2 - but as you see this is a major new version that includes breaking changes - which means code changes that have to be made. Also there is a 3.x for Ionic Native, which also includes breaking changes. So it is better to first get the project running with the current version again and then think about upgrading (which is not a big problem - but shouldn’t be done at the same time).

So I think i am on the right track now, still hitting some issue.

I run into this when ionic serve:

[INFO] Starting app-scripts server: --port 8100 --p 8100 --livereload-port 35729 --r
       35729 --address 0.0.0.0 - Ctrl+C to cancel
[22:53:08]  watch started ... 
[22:53:08]  build dev started ... 
Error: /Users/adrianli/Desktop/ionic/cow/src/app/main.ts was not found. The "main.dev.ts" and "main.prod.ts" files have been deprecated. Please create a new file "main.ts" containing the content of "main.dev.ts", and then delete the deprecated files.
                            For more information, please see the default Ionic project main.ts file here:
                            https://github.com/driftyco/ionic2-app-base/tree/master/src/app/main.ts

it looks like I hv a different version going on there, and i m not sure what i should do next.

I hv the app.ts and app.html inside the app folder. I dun mind going to the latest 2.x version, but I dunno how to get there…

Ok, hold.

What version did you develop your app with? Not 2.3? Wasn’t the package.json the version from 6 months ago?

Can you give an overview of your /src please? Use the tree command on the command line (https://superuser.com/questions/359723/mac-os-x-equivalent-of-the-ubuntu-tree-command).

should be around 6 months ago.
I might hv messed up the package.json file now, cuz i hv tried many different ways to install and reinstall things after updating the ionic seemed to break things apart.

The file structure:

/Users/adrianli/Desktop/ionic/cow
├── app
├── hooks
├── node_modules
├── platforms
├── plugins
├── resources
├── typings
└── www

sorry I am really getting a bit messy right here, i thought it will be easy to update everything into the latest ionic2.x version without breaking it…

Please look into your git or whatever you are using what ionic-angular version was when you built the app.

There is no /src folder?
Can you also include all the files in /app please?

Should have been - but you ended up here in quite a broken state already because of the gulp stuff and your package.json showing 2.3.0 - which doesn’t seem right somehow. Right now it is just figuring out what we are really dealing with (see folder structure and with which version the app was actually built)

My app folder hv:
├── app.html
├── app.ts
├── pages
├── theme
├── pipes
└──providers

Finally i get to the backup of my last workable save, but it still cant get it up and running.

the package.json look like this:

{
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "^2.0.0-rc.2",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.10",
    "ionic-native": "1.3.2",
    "ionicons": "3.0.0",
    "ng2-simple-page-scroll": "^1.0.2",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "2.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "ionic-gulp-tslint": "^1.0.0",
    "tslint-ionic-rules": "^0.0.3",
    "run-sequence": "1.1.5"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "name": "cow",
  "description": "cow: An Ionic project"
}

So I guess the version i was using is

"ionic-angular": "2.0.0-beta.10",
  "ionic-native": "1.3.2",

so, I deleted the node_modules and use the old package.json file to run npm install. then i got this:

Error: Cannot find module '@angular/tsc-wrapped/src/tsc'

I am really lost here :tired_face:

I use npm install @angular/tsc-wrapped autoprefixer

and run ionic serve again, then i get

TypeError: Object prototype may only be an Object or null: undefined

noted, that if i put back the gulp file, same thing happened again as it originally was. it’s like I am walking in circles.

Oh, you were on 2.0.0-beta.10 - that changes everything :frowning: :confused: But of course makes sense as it is from Nov 3, 2016.

On the other side now makes sense that stuff didn’t work before and requires a bit more work to get it working.

New plan:

  1. I would checkout this version that you build your app from into a new, clean folder.
  2. Then create a new Ionic project in another folder with ionic start blank blank. (folder will be named “blank” then)
  3. Copy the scripts part of the blank’s package.json to your project’s.
  4. Remove your devDependencies and replace it with this:
"devDependencies": {
  "@ionic/app-scripts": "0.0.47",
  "typescript": "2.0.9"
}

(this is from https://github.com/ionic-team/ionic/releases/tag/v2.0.0-rc.4 which is the closest to you version I could find)
5. Then run ionic info on it. What does it tell you?
6. If no errors, try ionic serve. What does it tell you?

I dont have the scripts part in the original package.json file, so i just add to it like this:

{
  "dependencies": {
    "@angular/animations": "^4.2.3",
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/compiler-cli": "^2.4.8",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "^4.2.3",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/platform-server": "^4.2.3",
    "@angular/router": "^2.0.0-rc.2",
    "@angular/tsc-wrapped": "^4.2.3",
    "@ionic/app-scripts": "^1.3.7",
    "autoprefixer": "^7.1.1",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.10",
    "ionic-native": "1.3.2",
    "ionicons": "3.0.0",
    "ng2-simple-page-scroll": "^1.0.2",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "sw-toolbox": "^3.6.0",
    "typescript": "^2.3.4",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.47",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "name": "cow",
  "description": "cow: An Ionic project",
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  }
}

To be sure, I delete the node_module folder and run npm install.
then I run ionic info and got this:

global packages:

    @ionic/cli-plugin-proxy : 1.3.1
    @ionic/cli-utils        : 1.4.0
    Ionic CLI               : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Ionic Framework                 : ionic-angular 2.3.0

System:

    Node       : v8.0.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.8.6 
    ios-sim    : 5.0.8 
    npm        : 5.0.3 

then I run ionic serve and got this error, same as before:

[INFO] Starting app-scripts server: --port 8100 --p 8100 --livereload-port 35729 --r
       35729 --address 0.0.0.0 - Ctrl+C to cancel
[00:17:27]  watch started ... 
[00:17:27]  build dev started ... 
Error: /Users/adrianli/Desktop/ionic/cow/src/app/main.ts was not found. The "main.dev.ts" and "main.prod.ts" files have been deprecated. Please create a new file "main.ts" containing the content of "main.dev.ts", and then delete the deprecated files.
                            For more information, please see the default Ionic project main.ts file here:
                            https://github.com/driftyco/ionic2-app-base/tree/master/src/app/main.ts

:cold_sweat:

Good catch, forgot to mention that.

Copy that file to /app in your project and try again.