How to debug 'ionic serve'

Ionic Framework ionic-v3
1

Hi everyone. I was creating a brand new proyect and had to reboot my computer. When I ran ionic serve it just hung up before webpack finished:

herrera@E49:~/proyectos/Tlahtoa$ ionic serve
[INFO] Starting app-scripts server: --port 8100 --p 8100 --livereload-port 35729 --r 35729 --address localhost - Ctrl+C
       to cancel
[01:19:39]  watch started ... 
[01:19:39]  build dev started ... 
[01:19:39]  clean started ... 
[01:19:39]  clean finished in 1 ms 
[01:19:39]  copy started ... 
[01:19:39]  transpile started ... 
[01:19:43]  transpile finished in 3.21 s 
[01:19:43]  preprocess started ... 
[01:19:43]  deeplinks started ... 
[01:19:43]  deeplinks finished in 96 ms 
[01:19:43]  preprocess finished in 97 ms 
[01:19:43]  webpack started ... 
[01:19:43]  copy finished in 3.49 s

Then it just closes, having access to the terminal again.

I guess it’s something to do with Webpack, but I actually updated and reinstalled everything: webpack, ionic, even npm itself. I also created a blank proyect and got the same results. And of course, since this process doesnt end correctly, Android compiling can’t be completed.

Is there a way to run ‘ionic serve’ on a more verbose way? Thanks for reading.

ionic info

cli packages: (/home/herrera/proyectos/Tlahtoa/node_modules)

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 26.0.2
    Node              : v8.2.1
    OS                : Linux 4.10
    npm               : 5.3.0
2

Run with --verbose added at the end.

3

I did. Nothing happened, same output.

4

Hmpf. Try npm run ionic:serve --verbose please.

5

Hi everyone. I just found out what happened.

I created a Popover page, by copying/pasting it from a fiddle. Instead of properly creating a page with ionic create page MyPage, I just added it to the caller .ts file. I also exported the module and imported it app.module.ts just as any other class.

It was clearly a problem with Webpack, unable to see what was going on. Even Brackets didn’t report anything to me at the time.

Moral of the story is, it doesn’t matter if you see code working somewhere else, it doesn’t matter how simple is your code. If you have to create a view, even within a view, you should create it standalone with ionic create or whichever method you use.

I hope this helps someone sometime.

2 Likes
6

I would change the emphasis slightly on the advice in the previous post. It is safest to put all concrete classes in their own file, and this is especially true of components and pages.

2 Likes