Serve does not work (Ionic 4)

Ionic Framework
1

I created new Ionic 4 app, with updates ionic-cli and I cant run ionic serve. Do you know where could be a problem?

Here is terminal log:

$ ionic serve
> ng run app:serve --host=0.0.0.0 --port=8100

[INFO] Development server running!
       
       Local: http://localhost:8100
       External: http://192.168.0.100:8100
       DevApp: webdemo@8100 on Jan-MacBook-Pro-4.local
       
       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[ng] ℹ ｢wdm｣: wait until bundle finished: /
[ng] 
[ng] Date: 2018-11-21T07:21:54.536Z
[ng] Hash: 960856cda10fdd6b8ef4
[ng] Time: 61613ms
[ng] chunk {common} common.js, common.js.map (common) 6.24 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 140 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.85 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 19.1 kB [initial] [rendered]
[ng] chunk {tabs-tabs-module} tabs-tabs-module.js, tabs-tabs-module.js.map (tabs-tabs-module) 26.4 kB  [rendered]
[ng] chunk {0} 0.js, 0.js.map () 18.1 kB  [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.7 MB [initial] [rendered]
[ng] chunk {1} 1.js, 1.js.map () 93.4 kB  [rendered]
[ng] chunk {2} 2.js, 2.js.map () 1.85 kB  [rendered]
[ng] chunk {3} 3.js, 3.js.map () 1.06 kB  [rendered]
[ng] chunk {4} 4.js, 4.js.map () 3.32 kB  [rendered]
[ng] chunk {5} 5.js, 5.js.map () 5.36 kB  [rendered]
[ng] chunk {6} 6.js, 6.js.map () 14.4 kB  [rendered]
[ng] chunk {7} 7.js, 7.js.map () 1.62 kB  [rendered]
[ng] chunk {8} 8.js, 8.js.map () 2.7 kB  [rendered]
[ng] chunk {9} 9.js, 9.js.map () 1.36 kB  [rendered]
[ng] chunk {10} 10.js, 10.js.map () 7.92 kB  [rendered]
[ng] chunk {11} 11.js, 11.js.map () 5.03 kB  [rendered]
[ng] chunk {12} 12.js, 12.js.map () 41.1 kB  [rendered]
[ng] chunk {13} 13.js, 13.js.map () 43.2 kB  [rendered]
[ng] chunk {14} 14.js, 14.js.map () 13.4 kB  [rendered]
[ng] chunk {15} 15.js, 15.js.map () 13.4 kB  [rendered]
[ng] chunk {16} 16.js, 16.js.map () 22.9 kB  [rendered]
[ng] chunk {17} 17.js, 17.js.map () 22.9 kB  [rendered]
[ng] chunk {18} 18.js, 18.js.map () 20.6 kB  [rendered]
[ng] chunk {19} 19.js, 19.js.map () 20.6 kB  [rendered]
[ng] chunk {20} 20.js, 20.js.map () 9.5 kB  [rendered]
[ng] chunk {21} 21.js, 21.js.map () 9.65 kB  [rendered]
[ng] chunk {22} 22.js, 22.js.map () 28.8 kB  [rendered]
[ng] chunk {23} 23.js, 23.js.map () 29 kB  [rendered]
[ng] chunk {24} 24.js, 24.js.map () 12.4 kB  [rendered]
[ng] chunk {25} 25.js, 25.js.map () 12.4 kB  [rendered]
[ng] chunk {26} 26.js, 26.js.map () 10.1 kB  [rendered]
[ng] chunk {27} 27.js, 27.js.map () 10.1 kB  [rendered]
[ng] chunk {28} 28.js, 28.js.map () 3.43 kB  [rendered]
[ng] chunk {29} 29.js, 29.js.map () 3.51 kB  [rendered]
[ng] chunk {30} 30.js, 30.js.map () 47.4 kB  [rendered]
[ng] chunk {31} 31.js, 31.js.map () 47.4 kB  [rendered]
[ng] chunk {32} 32.js, 32.js.map () 27.4 kB  [rendered]
[ng] chunk {33} 33.js, 33.js.map () 27.5 kB  [rendered]
[ng] chunk {34} 34.js, 34.js.map () 19.4 kB  [rendered]
[ng] chunk {35} 35.js, 35.js.map () 19.7 kB  [rendered]
[ng] chunk {36} 36.js, 36.js.map () 20.3 kB  [rendered]
[ng] chunk {37} 37.js, 37.js.map () 20.4 kB  [rendered]
[ng] chunk {38} 38.js, 38.js.map () 20.3 kB  [rendered]
[ng] chunk {39} 39.js, 39.js.map () 20.3 kB  [rendered]
[ng] chunk {40} 40.js, 40.js.map () 15.1 kB  [rendered]
[ng] chunk {41} 41.js, 41.js.map () 15.1 kB  [rendered]
[ng] chunk {42} 42.js, 42.js.map () 28.5 kB  [rendered]
[ng] chunk {43} 43.js, 43.js.map () 29.5 kB  [rendered]
[ng] chunk {44} 44.js, 44.js.map () 23.3 kB  [rendered]
[ng] chunk {45} 45.js, 45.js.map () 23.7 kB  [rendered]
[ng] chunk {46} 46.js, 46.js.map () 22.4 kB  [rendered]
[ng] chunk {47} 47.js, 47.js.map () 22.9 kB  [rendered]
[ng] chunk {48} 48.js, 48.js.map () 21.3 kB  [rendered]
[ng] chunk {49} 49.js, 49.js.map () 21.6 kB  [rendered]
[ng] chunk {50} 50.js, 50.js.map () 13.6 kB  [rendered]
[ng] chunk {51} 51.js, 51.js.map () 13.7 kB  [rendered]
[ng] chunk {52} 52.js, 52.js.map () 30.5 kB  [rendered]
[ng] chunk {53} 53.js, 53.js.map () 30.6 kB  [rendered]
[ng] 
[ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/global.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] TypeError: Cannot read property 'split' of undefined
[ng]     at getRenderFuncFromSassImpl (/Applications/MAMP/htdocs/ucto/webdemo/node_modules/sass-loader/lib/loader.js:88:29)
[ng]     at Object.sassLoader (/Applications/MAMP/htdocs/ucto/webdemo/node_modules/sass-loader/lib/loader.js:46:20)
[ng] ERROR in ./src/theme/variables.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/theme/variables.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] TypeError: Cannot read property 'split' of undefined
[ng]     at getRenderFuncFromSassImpl (/Applications/MAMP/htdocs/ucto/webdemo/node_modules/sass-loader/lib/loader.js:88:29)
[ng]     at Object.sassLoader (/Applications/MAMP/htdocs/ucto/webdemo/node_modules/sass-loader/lib/loader.js:46:20)
[ng] chunk {54} 54.js, 54.js.map () 39.8 kB  [rendered]
[ng] chunk {55} 55.js, 55.js.map () 41.6 kB  [rendered]
[ng] chunk {56} 56.js, 56.js.map () 35.2 kB  [rendered]
[ng] chunk {57} 57.js, 57.js.map () 35.6 kB  [rendered]
[ng] chunk {58} 58.js, 58.js.map () 12.9 kB  [rendered]
[ng] chunk {59} 59.js, 59.js.map () 12.9 kB  [rendered]
[ng] chunk {60} 60.js, 60.js.map () 21.4 kB  [rendered]
[ng] chunk {61} 61.js, 61.js.map () 21.4 kB  [rendered]
[ng] chunk {62} 62.js, 62.js.map () 34.5 kB  [rendered]
[ng] chunk {63} 63.js, 63.js.map () 34.9 kB  [rendered]
[ng] chunk {64} 64.js, 64.js.map () 7.05 kB  [rendered]
[ng] chunk {65} 65.js, 65.js.map () 7.21 kB  [rendered]
[ng] chunk {66} 66.js, 66.js.map () 9.7 kB  [rendered]
[ng] chunk {67} 67.js, 67.js.map () 9.71 kB  [rendered]
[ng] chunk {68} 68.js, 68.js.map () 28.8 kB  [rendered]
[ng] chunk {69} 69.js, 69.js.map () 29 kB  [rendered]
[ng] chunk {70} 70.js, 70.js.map () 29 kB  [rendered]
[ng] chunk {71} 71.js, 71.js.map () 29.9 kB  [rendered]
[ng] chunk {72} 72.js, 72.js.map () 21 kB  [rendered]
[ng] chunk {73} 73.js, 73.js.map () 21.2 kB  [rendered]
[ng] chunk {74} 74.js, 74.js.map () 19.6 kB  [rendered]
[ng] chunk {75} 75.js, 75.js.map () 20 kB  [rendered]
[ng] chunk {76} 76.js, 76.js.map () 13 kB  [rendered]
[ng] chunk {77} 77.js, 77.js.map () 13 kB  [rendered]
[ng] chunk {78} 78.js, 78.js.map () 17.9 kB  [rendered]
[ng] chunk {79} 79.js, 79.js.map () 17.9 kB  [rendered]
[ng] chunk {80} 80.js, 80.js.map () 14 kB  [rendered]
[ng] chunk {81} 81.js, 81.js.map () 14 kB  [rendered]
[ng] chunk {82} 82.js, 82.js.map () 27.8 kB  [rendered]
[ng] chunk {83} 83.js, 83.js.map () 28.6 kB  [rendered]
[ng] chunk {84} 84.js, 84.js.map () 31.4 kB  [rendered]
[ng] chunk {85} 85.js, 85.js.map () 32.8 kB  [rendered]
[ng] chunk {86} 86.js, 86.js.map () 21 kB  [rendered]
[ng] chunk {87} 87.js, 87.js.map () 21.2 kB  [rendered]
[ng] chunk {88} 88.js, 88.js.map () 36 kB  [rendered]
[ng] chunk {89} 89.js, 89.js.map () 36.2 kB  [rendered]
[ng] chunk {90} 90.js, 90.js.map () 17.9 kB  [rendered]
[ng] chunk {91} 91.js, 91.js.map () 17.9 kB  [rendered]
[ng] chunk {92} 92.js, 92.js.map () 9.51 kB  [rendered]
[ng] chunk {93} 93.js, 93.js.map () 9.52 kB  [rendered]
[ng] chunk {94} 94.js, 94.js.map () 21 kB  [rendered]
[ng] chunk {95} 95.js, 95.js.map () 21 kB  [rendered]
[ng] chunk {96} 96.js, 96.js.map () 34.7 kB  [rendered]
[ng] chunk {97} 97.js, 97.js.map () 35.3 kB  [rendered]
[ng] chunk {98} 98.js, 98.js.map () 3.43 kB  [rendered]
[ng] chunk {99} 99.js, 99.js.map () 3.5 kB  [rendered]
[ng] chunk {100} 100.js, 100.js.map () 26.3 kB  [rendered]
[ng] chunk {101} 101.js, 101.js.map () 26.8 kB  [rendered]
[ng] chunk {102} 102.js, 102.js.map () 36.1 kB  [rendered]
[ng] chunk {103} 103.js, 103.js.map () 36.3 kB  [rendered]
[ng] chunk {104} 104.js, 104.js.map () 25.3 kB  [rendered]
[ng] chunk {105} 105.js, 105.js.map () 26.1 kB  [rendered]
[ng] chunk {106} 106.js, 106.js.map () 17.6 kB  [rendered]
[ng] chunk {107} 107.js, 107.js.map () 17.8 kB  [rendered]
[ng] chunk {108} 108.js, 108.js.map () 25.9 kB  [rendered]
[ng] chunk {109} 109.js, 109.js.map () 26.6 kB  [rendered]
[ng] chunk {110} 110.js, 110.js.map () 9.71 kB  [rendered]
[ng] chunk {111} 111.js, 111.js.map () 9.96 kB  [rendered]
[ng] chunk {112} 112.js, 112.js.map () 23.2 kB  [rendered]
[ng] chunk {113} 113.js, 113.js.map () 23.6 kB  [rendered]
[ng] chunk {114} 114.js, 114.js.map () 21.8 kB  [rendered]
[ng] chunk {115} 115.js, 115.js.map () 22.2 kB  [rendered]
[ng] chunk {116} 116.js, 116.js.map () 21.3 kB  [rendered]
[ng] chunk {117} 117.js, 117.js.map () 21.3 kB  [rendered]
[ng] chunk {118} 118.js, 118.js.map () 27.5 kB  [rendered]
[ng] chunk {119} 119.js, 119.js.map () 27.7 kB  [rendered]
[ng] chunk {120} 120.js, 120.js.map () 34.3 kB  [rendered]
[ng] chunk {121} 121.js, 121.js.map () 34.3 kB  [rendered]
[ng] chunk {122} 122.js, 122.js.map () 34.7 kB  [rendered]
[ng] chunk {123} 123.js, 123.js.map () 35.2 kB  [rendered]
[ng] chunk {124} 124.js, 124.js.map () 25.9 kB  [rendered]
[ng] chunk {125} 125.js, 125.js.map () 26.8 kB  [rendered]
[ng] chunk {126} 126.js, 126.js.map () 17.6 kB  [rendered]
[ng] chunk {127} 127.js, 127.js.map () 17.7 kB  [rendered]
[ng] chunk {128} 128.js, 128.js.map () 10.2 kB  [rendered]
[ng] chunk {129} 129.js, 129.js.map () 10.2 kB  [rendered]
[ng] chunk {130} 130.js, 130.js.map () 32.2 kB  [rendered]
[ng] chunk {131} 131.js, 131.js.map () 33.5 kB  [rendered]
[ng] chunk {132} 132.js, 132.js.map () 17 kB  [rendered]
[ng] chunk {133} 133.js, 133.js.map () 17.2 kB  [rendered]
[ng] chunk {134} 134.js, 134.js.map () 47.4 kB  [rendered]
[ng] chunk {135} 135.js, 135.js.map () 47.4 kB  [rendered]
[ng] chunk {136} 136.js, 136.js.map () 27.4 kB  [rendered]
[ng] chunk {137} 137.js, 137.js.map () 27.5 kB  [rendered]
[ng] chunk {138} 138.js, 138.js.map () 21.3 kB  [rendered]
[ng] chunk {139} 139.js, 139.js.map () 21.3 kB  [rendered]
[ng] chunk {140} 140.js, 140.js.map () 21.4 kB  [rendered]
[ng] chunk {141} 141.js, 141.js.map () 21.4 kB  [rendered]
[ng] chunk {142} 142.js, 142.js.map () 17 kB  [rendered]
[ng] chunk {143} 143.js, 143.js.map () 17.3 kB  [rendered]
[ng] chunk {144} 144.js, 144.js.map () 24.8 kB  [rendered]
[ng] chunk {145} 145.js, 145.js.map () 25.8 kB  [rendered]
[ng] chunk {146} 146.js, 146.js.map () 21.1 kB  [rendered]
[ng] chunk {147} 147.js, 147.js.map () 21.4 kB  [rendered]
[ng] chunk {148} 148.js, 148.js.map () 2.45 kB  [rendered]
[ng] chunk {149} 149.js, 149.js.map () 2.48 kB  [rendered]
[ng] chunk {150} 150.js, 150.js.map () 21.6 kB  [rendered]
[ng] chunk {151} 151.js, 151.js.map () 21.9 kB  [rendered]
[ng] chunk {152} 152.js, 152.js.map () 21.1 kB  [rendered]
[ng] chunk {153} 153.js, 153.js.map () 21.4 kB  [rendered]
[ng] chunk {154} 154.js, 154.js.map () 19.6 kB  [rendered]
[ng] chunk {155} 155.js, 155.js.map () 19.7 kB  [rendered]
[ng] chunk {156} 156.js, 156.js.map () 19.6 kB  [rendered]
[ng] chunk {157} 157.js, 157.js.map () 19.9 kB  [rendered]
[ng] chunk {158} 158.js, 158.js.map () 22.8 kB  [rendered]
[ng] chunk {159} 159.js, 159.js.map () 22.9 kB  [rendered]
[ng] chunk {160} 160.js, 160.js.map () 25.5 kB  [rendered]
[ng] chunk {161} 161.js, 161.js.map () 25.5 kB  [rendered]
[ng] chunk {162} 162.js, 162.js.map () 3.82 kB  [rendered]
[ng] chunk {163} 163.js, 163.js.map () 1.69 kB  [rendered]
[ng] ℹ ｢wdm｣: Failed to compile.
2

You’ve got something special in ./src/global.scss?

3

No, it’s clean installation

4

what are your ionic info? node version?

5 
Ionic:

   ionic (Ionic CLI)             : 4.4.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v10.12.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS
6

weird…package.json content? could you upload your project to a GitHub repo to let me clone it?

7

Got exactly the same issue. Did you get it to work out?

8

Just in case you didn’t find the question, npm install node-sass worked out for me as @mmalc posted here: Ionic 4 from 4.1.x to 4.3.0 entirely broken on Win10

1 Like
9

It’s here: https://github.com/jvaclavik/ionic-serve-bug
But it should be clean instalation from Ionic CLI

1 Like
10

I’m not sure if it’s connected. I tried that and it didn’t work. My error is little bit different:

[ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/global.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] TypeError: Cannot read property 'split' of undefined
[ng]     at getRenderFuncFromSassImpl (/Applications/MAMP/htdocs/ucto/webdemo/node_modules/sass-loader/lib/loader.js:88:29)
[ng]     at Object.sassLoader (/Applications/MAMP/htdocs/ucto/webdemo/node_modules/sass-loader/lib/loader.js:46:20)
[ng] ERROR in ./src/theme/variables.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/theme/variables.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] TypeError: Cannot read property 'split' of undefined
[ng]     at getRenderFuncFromSassImpl (/Applications/MAMP/htdocs/ucto/webdemo/node_modules/sass-loader/lib/loader.js:88:29)
[ng]     at Object.sassLoader (/Applications/MAMP/htdocs/ucto/webdemo/node_modules/sass-loader/lib/loader.js:46:20)
11

@jvaclavik I cloned your repo and all went fine, no error

maybe try to “force” refresh the libs, just in case and then try again

 rm -r node_modules
 rm package-lock.json
 npm install

does that help?

p.s.: don’t think it does matter but I’m using Node v10.13.0 and npm v6.4.1

12

I tried:

  • remove node modules and reinstall it with yarn and also with npm
  • reinstall node and use many different versions of node (also 10.13.0)
  • try different versions of ionic cli (4.3.1, 4.4.0) and also create new starters
  • install node-sass

Nothing worked :frowning:

13

I’m on a Mac, are you on Linux?

In https://github.com/ionic-team/ionic-cli/issues/3697 I saw a suggestion to run npx ng serve, does that help?

14

Didn’t help, I’m also on Mac.

15

Crazy :frowning:

Seriously I don’t have more ideas…

P.S.: This one is the same issue as yours, maybe you could add some details and follows it https://github.com/ionic-team/ionic-cli/issues/3702

16

Maybe, doesn’t make sense, but have you try in a different folder/root?

I remember once I had a project I checked out into a “test” subfolder, I tested then in another one and it worked out

17

The only thing I could think of, and this is just a guess, is that – since I saw that there were a bunch of C++ compilations related to sass during the install process – perhaps your installation did not go 100% as smoothly as it should have.

Check the installation logs – do you have the entire C++ build toolchain on your system? You may need to install some packages on any OS for that…

Try a new fresh install and observe the command line as it goes along – do you see a bunch of g++ compilations going well pass by your screen – that phase took at least 30 seconds on my old desktop, you should be clearly seeing that phase happen with no errors.

18

jvaclavik … were you able to find any solution to the problem as I am facing the same issue.

My NPM Version is : 6.4.1
and IONIC CLI 4.5.0

Would appreciate your response.

19

Apologies , mine issue was different .

I was getting Error: Cannot find module ‘node-sass’… to which the resolution is below :

sudo npm install --save-dev  --unsafe-perm node-sass
5 Likes
20

could you please explain why this command and what does it do?