Running ionic v1 project with new ionic

ionic-v1
1

Hello everyone,

I am having trouble building an app that was developed long time ago using ionic v1, and would love to get some help.
Looking in this forum, stackoverflow and github, I found a lot of solutions for similar problems but unfortunately, none of them worked for me.
The problem is when I serve the app in the browser, the app starts without errors from the cmd, but it is not able to launch correctly.
In the chrome console, I’m getting 404 errors as well as “angular is not defined” errors, and it seems that the app is looking for files using the new version’s resource addresses (i.e in localhost/assets/…) :

Capture
Capture1027×359 67.3 KB

The steps I used to build:

changing ionic.project to ionic.config.json
npm install -g ionic cordova bower gulp
npm install
bower install
gulp build

So far, I have tried re-installing all related packages (ionic-cli 2 and 3, cordova, angular) and even the entire nodejs installation, with no success.

To run the app, I tried:

ionic serve
ionic serve --v1
ionic serve --type iconic1
ionic serve ionic-angular

My ionic info:

cli packages: (C:\Users\user\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Gulp CLI : CLI version 3.9.1 Local version 3.9.1

local packages:

    Ionic Framework : ionic1 1.1.0

System:

    Node : v6.11.3
    npm  : 3.10.10
    OS   : Windows 8

and part of my package.json may be helpful:

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "An Ionic project",
  "dependencies": {
    "angular": "^1.5.8",
    "angular-base64-upload": "^0.1.19",
    "ionic-material": "^0.4.1",
    "ionic-sdk": "^1.3.0",
    "jquery": "^3.1.0",
    "leaflet": "^0.7.7",
    "localforage": "^1.4.2",
    "ng-cordova": "^0.1.27-alpha",
    "svg-morpheus": "^0.3.0",
    "ui-leaflet": "^1.0.1"
  },
    .
    .
    .
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "com.ionic.keyboard",
    "org.apache.cordova.geolocation"
  ],
  "cordovaPlatforms": [
    "android"
  ]
}

I appreciate all your help.

2

Please show us the output of ionic serve --verbose and the complete console output when you open the app in the browser.

3

The output of ionic serve --verbose

λ ionic serve --verbose
[DEBUG] CLI flags: { interactive: true, confirm: false }
[DEBUG] { cwd: 'C:\\Users\\user\\Documents\\GitHub\\myapp', local: false, binPath:
        'C:\\Users\\user\\AppData\\Roaming\\npm\\node_modules\\ionic\\bin\\ionic', libPath:
        'C:\\Users\\user\\AppData\\Roaming\\npm\\node_modules\\ionic\\dist\\index.js' }
[INFO] Starting server (address: 0.0.0.0, port: 8100, dev server port: 53703, livereload port: 35729) - Ctrl+C to cancel
[DEBUG] Watch patterns: scss/**/*, www/**/*, !www/lib/**/*, !www/**/*.map
[WARN] The sass task not found in your Gulpfile, which is used to compile SCSS files. The default Ionic Gulpfile can be

       downloaded from https://github.com/ionic-team/ionic-app-base/blob/master/gulpfile.js
[INFO] Development server running!
       Local: http://localhost:8100
       External: http://192.168.0.27:8100, http://192.168.56.1:8100, http://192.168.99.1:8100

Output on chrome console:

Capture2
Capture2.JPG1365×728 164 KB

Thank you.

4

What does your gulpfile.js look like?
If it doesn’t exist, do what the error message says and create a file with that content.

5

This is the gulp file

var gulp = require('gulp');
var webserver = require('gulp-webserver');
var watch = require('gulp-watch');
var inject = require('gulp-inject');
var del = require('del');
var packageJson = require('./package.json');

gulp.task('copy_packages', function () {
  var modules = Object.keys(packageJson.dependencies);
  var moduleFiles = modules.map(function(module) {
    return 'node_modules/' + module + '/**';
  });

  return gulp.src(moduleFiles, { base: 'node_modules' })
    .pipe(gulp.dest('dist/assets'));
});

gulp.task('clean', function (cb) {
  del.sync(['dist/**', '!dist']);
  cb();
});

gulp.task('webserver', function () {
  var stream = gulp.src('dist')
    .pipe(webserver({
      livereload: true,
      open: true
    }));
  return stream;
});

gulp.task('watch', function () {
  return gulp.src('www/**/*')
    .pipe(watch('www/**/*'))
    .pipe(gulp.dest('dist'));
});

gulp.task('copy', function (cb) {
  gulp.src('www/**/*')
    .pipe(gulp.dest('dist'));
  cb();
});

gulp.task('dev', ['clean', 'copy', 'copy_packages', 'watch', 'webserver']);

gulp.task('build', ['clean', 'copy', 'copy_packages']);
6

Yeah, see what is missing in there in comparison to the current default file. The error message mentions a “sass task”, maybe you don’t have that one?

7

Thank you for your help, I added the task from the official file and installed sass then build the gulpfile successfully. But still the same result, the app won’t run.

λ gulp build
[22:19:05] Using gulpfile ~\Documents\GitHub\myapp\gulpfile.js
[22:19:05] Starting 'clean'...
[22:19:11] Finished 'clean' after 6.28 s
[22:19:11] Starting 'copy'...
[22:19:11] Finished 'copy' after 13 ms
[22:19:11] Starting 'copy_packages'...
[22:19:11] Starting 'sass'...
[22:19:16] Finished 'sass' after 4.89 s
[22:19:26] Finished 'copy_packages' after 15 s
[22:19:26] Starting 'build'...
[22:19:26] Finished 'build' after 6.25 μs
8

Also, this is the output of ionic serve --verbose now:

[DEBUG] CLI flags: { interactive: true, confirm: false }
[DEBUG] { cwd: 'C:\\Users\\user\\Documents\\GitHub\\myapp', local: false, binPath:
        'C:\\Users\\user\\AppData\\Roaming\\npm\\node_modules\\ionic\\bin\\ionic', libPath:
        'C:\\Users\\user\\AppData\\Roaming\\npm\\node_modules\\ionic\\dist\\index.js' }
[INFO] Starting server (address: 0.0.0.0, port: 8100, dev server port: 53703, livereload port: 35729) - Ctrl+C to cancel

[DEBUG] Watch patterns: scss/**/*, www/**/*, !www/lib/**/*, !www/**/*.map
[INFO] Development server running!
       Local: http://localhost:8100
       External: http://192.168.0.27:8100, http://192.168.56.1:8100, http://192.168.99.1:8100
9

What is the error output in the browser now? Unchanged?
Please go to a new folder, run ionic start --type=ionic1 and then ionic serve in that project? Does that work?

10

Yes, the output was the same. And new applications work fine.

11

Then keep comparing these two apps to see what is the difference.

1 Like
12

Had the similar issue, after installing new version of Ionic CLI and Angular CLI, the structure of the configuration has changed. Changing the line

"type": "angular"
to
"type": "ionic1"

within ionic.config.json solved the issue.

1 Like