Update ionic 2 to ionic 3 project


#1

I had upgraded ionic with npm install -g ionic to the latest version 3.10.3.
Soon my build stop working because some version issues like I need angular 4.1.3, etc.
After I fixed those issues and everything got “compiled”, I notice that my command:
ionic serve or ionic cordova run android --device reports that the build is complete but really it doesn’t run the project.
As you can see in the console log it doesn’t run the serve. I also notice that my www/build folder which should content all the project build is empty. Which means that the script is failing silence and the project doesn’t run.
But I can get the project to create the build by using ‘ionic build --aot’ but as soon I try to run the project using ‘ionic serve’ it clean the folder again back to where I started :frowning:

please help

folder www/build

[vns@betito lean2]$ ls www/build/
polyfills.js sw-toolbox.js

Console log

[vns@betito lean2]$ ionic serve --verbose
[DEBUG] CLI flags: { interactive: true, confirm: false }
[DEBUG] { cwd: '/home/vns/workspace/lean2', local: false, binPath: 
        '/usr/lib/node-v6.11.3-linux-x64/lib/node_modules/ionic/bin/ionic', libPath: 
        '/usr/lib/node-v6.11.3-linux-x64/lib/node_modules/ionic/dist/index.js' }
[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 - 
       Ctrl+C to cancel
[17:08:18]  watch started ... 
[17:08:18]  build dev started ... 
[17:08:18]  clean started ... 
[17:08:18]  clean finished in 2 ms 
[17:08:18]  copy started ... 
[17:08:18]  transpile started ... 
[17:08:22]  transpile finished in 4.02 s 
[17:08:22]  preprocess started ... 
[17:08:22]  deeplinks started ... 
[17:08:22]  deeplinks finished in 68 ms 
[17:08:22]  preprocess finished in 69 ms 
[17:08:22]  webpack started ... 
[17:08:22]  copy finished in 4.34 s

package:

{
    "name": "lean",
    "author": "PeopleWare",
    "homepage": "http://www.peopleware.do/",
    "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",
        "@angular/platform-server": "4.1.3",
        "@ionic-native/core": "^3.6.1",
        "@ionic-native/google-analytics": "^3.12.1",
        "@ionic-native/network": "3.12.1",
        "@ionic-native/splash-screen": "^4.2.1",
        "@ionic-native/status-bar": "^4.2.1",
        "@ionic-native/toast": "^3.13.1",
        "@ionic/storage": "2.0.0",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "1.0.5",
        "cordova-plugin-device": "1.1.4",
        "cordova-plugin-google-analytics": "~1.8.3",
        "cordova-plugin-network-information": "~1.3.3",
        "cordova-plugin-splashscreen": "~4.0.1",
        "cordova-plugin-statusbar": "2.2.1",
        "cordova-plugin-whitelist": "1.3.1",
        "cordova-plugin-x-toast": "^2.6.0",
        "ionic-angular": "3.6.1",
        "ionic-native": "2.4.1",
        "ionic-plugin-deploy": "~0.6.7",
        "ionic-plugin-keyboard": "~2.2.1",
        "ionicons": "3.0.0",
        "lodash": "^4.17.4",
        "moment": "^2.18.1",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.4.0",
        "zone.js": "^0.8.4"
    },
    "devDependencies": {
        "@angular/tsc-wrapped": "^4.3.6",
        "@ionic/app-scripts": "2.1.4",
        "typescript": "2.1.5"
    },
    "cordovaPlugins": [
        "cordova-plugin-splashscreen",
        "cordova-plugin-statusbar",
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-device",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [],
    "description": "lean2: An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-x-toast": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-google-analytics": {},
            "cordova-plugin-network-information": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-deploy": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

ionic info:

cli packages: (/usr/lib/node-v6.11.3-linux-x64/lib/node_modules)

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

global packages:

Cordova CLI : 6.5.0 

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.1

System:

Android SDK Tools : 25.2.5
Node              : v6.11.3
npm               : 5.3.0 
OS                : Linux 4.12

#2

Please start a new project with ionic start and see if you can build that.


#3

@angular/tsc-wrapped looks too high, and typescript too low.


#4

I Already did that it work; but when I start to put my code in the same thing happen again


#5

which version do you recommend? also the ionic start do not include this @angular/tsc-wrapped in any the new project WHY? I suspect that this lib is the problem.


#6

2.3.4 for typescript, and 4.1.3 for tsc-wrapped to match the rest of your angular stuff.

Shouldn’t be needed explicitly, but if you do have it, the version should match. @angular/cli-compiler should pull it in even if you don’t.


#7

Then your code is somehow broken. Do it piece by piece to find out what breaks it - if you know that post the code here for us to look at.


#8

Yea, @angular/tsc-wrapped is not needed; I fixed that issue by updating npm from 5.3 to 5.4.x
but still having the behavior describe above, about the ionic serve not running the project.


#9

I tryed that too, i am sure is not my code, for example I clone a old code from repo and just update the ionic cli, then try to run ionic serve and I got ‘Segmentation fault (core dumped)’ and retry and the message doesn’t show any more but the error continue.

[vns@betito lean]$ ionic serve

? The Ionic CLI (local version) has an update available (3.9.2 => 3.10.3)! Would you like to install it? Yes

npm install --save-dev --save-exact ionic@latest
:heavy_check_mark: Running command - done!

[OK] Updated Ionic CLI to 3.10.3! :tada:

Please re-run your command.

Note: You can downgrade to your old version by running: npm install --save --save-exact ionic@3.9.2
[vns@betito lean]$ ionic serve
[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 -
Ctrl+C to cancel
[07:41:22] watch started …
[07:41:22] build dev started …
[07:41:22] clean started …
[07:41:22] clean finished in 1 ms
[07:41:22] copy started …
[07:41:22] transpile started …
[07:41:26] transpile finished in 4.47 s
[07:41:26] preprocess started …
[07:41:26] preprocess finished in less than 1 ms
[07:41:26] webpack started …
[07:41:26] copy finished in 4.76 s
Segmentation fault (core dumped)

I also got the same issue with a new ionic project. So it is something with the tools.


#10

Which is a completely different error message than you posted before.

What do you get on ionic serve --verbose?
And what is your current ionic info now?


#11

Which is a completely different error message than you posted before.

It just show the first time the second time it doesn’t.

first try
[vns@betito lean2]$ ionic serve --verbose
Segmentation fault (core dumped)

second try
[vns@betito lean2]$ ionic serve --verbose
[DEBUG] CLI flags: { interactive: true, confirm: false }
[DEBUG] { cwd: ‘/home/vns/workspace/lean2’, local: false, binPath:
’/usr/lib/node-v6.11.3-linux-x64/lib/node_modules/ionic/bin/ionic’, libPath:
’/usr/lib/node-v6.11.3-linux-x64/lib/node_modules/ionic/dist/index.js’ }
[DEBUG] Daemon found (pid: 17732)
[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 -
Ctrl+C to cancel
[09:47:54] watch started …
[09:47:54] build dev started …
[09:47:54] clean started …
[09:47:54] clean finished in 2 ms
[09:47:54] copy started …
[09:47:54] transpile started …
[09:47:58] transpile finished in 4.19 s
[09:47:58] preprocess started …
[09:47:58] deeplinks started …
[09:47:58] deeplinks finished in 75 ms
[09:47:58] preprocess finished in 78 ms
[09:47:58] webpack started …
[09:47:58] copy finished in 4.57 s

[vns@betito lean2]$ ionic info

cli packages: (/usr/lib/node-v6.11.3-linux-x64/lib/node_modules)

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

global packages:

Cordova CLI : 6.5.0 

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.1.2
Ionic Framework    : ionic-angular 3.6.1

System:

Android SDK Tools : 25.2.5
Node              : v6.11.3
npm               : 5.4.1 
OS                : Linux 4.12

#12

No idea, sorry.
Last idea: Reinstall everything, including npm and node.


#13

Ok, I started a new project from zero

I was adding the code block by block :sob:
Then I hit the issue, it seems like the transpile code is affected somehow and some point when I added new code in the app.module.ts is break; below you can see that when I revert back the code it start work again. But also you can notice that is in the webpack step that the build process stop.

I will break my code modification even more so I can follow line by line. Until now I added all the pages without linked it to the module loader @NgModule.

[vns@betito lean]$ ionic serve
[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 -
Ctrl+C to cancel
[10:53:09] watch started …
[10:53:09] build dev started …
[10:53:09] clean started …
[10:53:09] clean finished in 6 ms
[10:53:09] copy started …
[10:53:09] transpile started …
[10:53:14] transpile finished in 4.45 s
[10:53:14] preprocess started …
[10:53:14] deeplinks started …
[10:53:14] deeplinks finished in 91 ms
[10:53:14] preprocess finished in 92 ms
[10:53:14] webpack started …
[10:53:14] copy finished in 4.78 s

[vns@betito lean]$ ionic serve
[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 -
Ctrl+C to cancel
[10:54:00] watch started …
[10:54:00] build dev started …
[10:54:00] clean started …
[10:54:00] clean finished in 1 ms
[10:54:00] copy started …
[10:54:00] transpile started …
[10:54:04] transpile finished in 3.56 s
[10:54:04] preprocess started …
[10:54:04] deeplinks started …
[10:54:04] deeplinks finished in 81 ms
[10:54:04] preprocess finished in 81 ms
[10:54:04] webpack started …
[10:54:04] copy finished in 3.88 s
[10:54:14] webpack finished in 10.46 s
[10:54:14] sass started …
[10:54:16] sass finished in 1.57 s
[10:54:16] postprocess started …
[10:54:16] postprocess finished in 8 ms
[10:54:16] lint started …
[10:54:16] build dev finished in 15.76 s
[10:54:16] watch ready in 15.86 s
[10:54:16] dev server running: http://localhost:8100/

[INFO] Development server running!
Local: http://localhost:8100
External: http://10.0.0.14:8100


#14

OK, I found the code causing the issue; as component is added to the @NgModule to be loaded the ionic serve stop working; do you see anything wrong with it; I don’t get any compile issue so, what it could be? as soon this component is added the build stop working. The only thing that I can point is that I have two modal component below; but the code was working fine before the ionic update and I don’t see anything wrong with it, except that now we using angular 4. Any ideas???

this component orden.ts

import { Component } from '@angular/core';
import { Alert, AlertController, LoadingController, NavController, 
  NavParams, ModalController, ViewController, ToastController } from 'ionic-angular';
import { OrdenService, Orden } from '../../providers/orden';
import { ItemsAlmacenService } from '../../providers/itemsAlmacen';
import { GoogleAnalytics } from '@ionic-native/google-analytics';
import { StorageUtils } from '../../utils/storage.utils';
import { PrintPage } from '../print/print';
import * as _ from 'lodash';
import * as moment from 'moment';

@Component({
  selector: 'page-orden',
  templateUrl: 'orden.html'
})
export class OrdenPage {

  orden: Orden;
  materiaPrima: boolean;
  materiaReciclados: boolean;
  materiaEmpaques: boolean;
  formulario: any;
  fields = [{"type":"input","key":"fnombre","templateOptions":{"label":"nombre","required":true,"type":"text"}}];

  constructor(public navCtrl: NavController, public navParams: NavParams, private ordenService: OrdenService, 
    private alertCtrl: AlertController, private loadingCtrl: LoadingController, private ga: GoogleAnalytics, 
    public modalCtrl: ModalController, private itemAlmacenService: ItemsAlmacenService, private toastCtrl: ToastController) {

    this.orden = this.navParams.get('orden');
    let formulario_actual = this.orden.formulario_actual;
    this.formulario = this.orden.proceso.formularios.find(function(item) { return item.nombre_formulario == formulario_actual});
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad OrdenPage');
    
  }

  ionViewDidEnter() {  
    
  }

  toggleMateria(){
    return this.materiaPrima = !this.materiaPrima;
  }

  toggleMateriaReciclados(){
    return this.materiaReciclados = !this.materiaReciclados;
  }

  toggleMateriaEmpaques(){
    return this.materiaEmpaques = !this.materiaEmpaques;
  }  

  stopProcess(){
    this.formulario.fecha_fin = moment().format();
    this.save(this.orden);
    //console.log("this.formulario: " + JSON.stringify(this.formulario));
  }

  startProcess(){
    this.formulario.fecha_inicio = moment().format();
    this.formulario.invmaquina = StorageUtils.getItem('maquina');
    this.formulario.usuario = StorageUtils.getAccount().login;
    this.save(this.orden);
    //console.log("this.formulario: " + JSON.stringify(this.formulario));
  }

  isStarted(){
    return moment(this.formulario.fecha_inicio).isAfter('2010-10-20');
  }

  printLabel(){
    //console.log('orden', JSON.stringify(this.orden));
    this.navCtrl.push(PrintPage, {orden: this.orden});
  }

  presentToast(pMessage: string) {
    let toast = this.toastCtrl.create({
      message: pMessage,
      duration: 3000,
      position: 'middle'
    });
  
    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });
  
    toast.present();
  }  

  save(orden: Orden) {
    this.ordenService.send(orden).then((result) => {
      console.log("orden saved");
      //console.log("orden: " + JSON.stringify(result));     
      this.presentToast('Orden actualizada');
      //console.log("result: " + JSON.stringify(result));
    }, (alert: Alert) => alert.present());    
  }

  modificacion(item) {
   //console.log('item a modificar', JSON.stringify(item));
   let itemModal = this.modalCtrl.create(ItemModificacion, { itemMod: item });
   itemModal.onDidDismiss(data => {     
    if(data){
      this.save(this.orden);
    }    
   });   
   itemModal.present();   

  //  let copy = Object.assign({}, this.orden.materiales[0]);
  //  copy.id = 0;
  //  this.orden.materiales_reciclados.push(copy);
  }

  sustituto(list, item, index) {    
    //console.log('item a sustituir', JSON.stringify(item));
    let loading = this.loadingCtrl.create({
      content: 'Cargando data...'
    });    
    
    loading.present();    

    this.itemAlmacenService.loadData(this.itemAlmacenService.items, 
      this.itemAlmacenService.itemsSustitutosUrl, item.itemid).then((result) => {
      console.log("items loaded");
      //console.log("items: " + JSON.stringify(result));
      
      let itemsList = this.itemAlmacenService.items = result;
      
      loading.dismiss();

      let itemModal = this.modalCtrl.create(ItemSustituto, 
        { list: itemsList, materiaPrima: this.orden.materiales, index: index });
      itemModal.onDidDismiss(data => {     
        if(data){
          this.save(this.orden);
        }    
      });   

      itemModal.present();        

      //console.log("result: " + JSON.stringify(result));
    }, (alert: Alert) => alert.present());    
  }

}

@Component({
  selector: 'item-modificacion',
  templateUrl: 'item-modificacion.html'
})
export class ItemModificacion {
 item: any;

 constructor(params: NavParams, public viewCtrl: ViewController) {
   //console.log('item a modificar', JSON.stringify(params.get('item')));
   this.item = params.get('itemMod');
 }

 save(){
  this.viewCtrl.dismiss(true);
  //this.closeSlidingItems();
 }

 dismiss() {
   this.viewCtrl.dismiss();
 } 

 public convertToNumber(event):number {  return +event; }
}

@Component({
  selector: 'item-sustituto',
  templateUrl: 'item-sustituto.html'
})
export class ItemSustituto {
 index: any;
 list: Array<any>;
 materiaPrima: Array<any>;

 constructor(params: NavParams, public viewCtrl: ViewController) {   
   this.index = params.get('index');
   this.list = params.get('list');   
   this.materiaPrima = params.get('materiaPrima');
   //console.log("this.index: " + JSON.stringify(this.index));
 }

  selected(itemSelected){
    itemSelected.producto = itemSelected.descrip;
    itemSelected.desperdicio = 0;
    itemSelected.cantidad = this.materiaPrima[this.index].cantidad;
    itemSelected.id = this.materiaPrima[this.index].id;
    itemSelected.lotenum = "";
    itemSelected.invformulario = this.materiaPrima[this.index].invformulario;
    _.fill(this.materiaPrima, itemSelected, this.index, this.index + 1);
    this.viewCtrl.dismiss(true);
  }

  dismiss() {
    this.viewCtrl.dismiss();
  } 

}

#15

Hi

Anything related to lodash and moments library not available? Are they mentioned in your index.html (not sure that is needed for these packages)

One of the difficult errors for me to find out when migrating to ionic 3.

Regards

Tom


#16

And if the issue is related to this orden page, I would suggest clearing all methods and then build it up again until you see what the problematic line is


#17

Yes, lodash and moments library are available; don’t need to be mention in the index.html; this was added using npm i lodash --save

Also this packages are used in others components that are working ok. Also I commented out that code and still not working.


#18

Did you comment all the code including imports? (Except for Component)

And even cleared the html template?


#19

Try npm run ionic:build --verbose please and post the output.


#20

I FOUND the issue, It seems that I cannot have multiple components declare inside one file, webpack implementation go crazy and doesn’t show any error either. I completed the code change and it is working now guys, Please note that the webpack implementation is broken on last ionic release, it doesn’t allow multiple component definition on one file.