Error when execute "ionic serve", Variables.scss, Android App

#1

First at all thanks for any help or guie, i’m new in Ionic :sweat_smile:.

Envyroment
Ionic:

ionic (Ionic CLI) : 4.10.2 (C:\Windows\System32\node_modules\ioni
c)
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.3.0

System:

NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 7 64Bits

Steps for geting the error
1.- use the commad “ionic start Test tabs”, not bugs here.
2.- use the commad “cd Test” then “ionic seve”, here is where crash the app

Log:

C:\Code\test2>ionic serve

ng run app:serve --host=0.0.0.0 --port=8100
[ng] WARNING: This is a simple server for use in testing or debugging Angular ap
plications
[ng] locally. It hasn’t been reviewed for security issues.
[ng] Binding this server to an open connection can result in compromising your a
pplication or
[ng] computer. Using a different host than the one passed to the “–host” flag m
ight result in
[ng] websocket connection issues. You might need to use “–disableHostCheck” if
that’s the
[ng] case.

[INFO] Development server running!

   Local: http://localhost:8100
   External: http://192.168.235.51:8100

   Use Ctrl+C to quit this process

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

[ng] i ?wdm?: wait until bundle finished: /
[ng] Date: 2019-02-07T21:02:05.677Z
[ng] Hash: 3d2b18dad1f2b38372a2
[ng] Time: 18541ms
[ng] chunk {common} common.js, common.js.map (common) 18.5 kB [rendered]
[ng] chunk {main} main.js, main.js.map (main) 33.7 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initia
l] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.9 kB [entry] [render
ed]
[ng] chunk {styles} styles.js, styles.js.map (styles) 21 kB [initial] [rendered]

[ng] chunk {tab1-tab1-module} tab1-tab1-module.js, tab1-tab1-module.js.map (tab1
-tab1-module) 7.91 kB [rendered]
[ng] chunk {tab2-tab2-module} tab2-tab2-module.js, tab2-tab2-module.js.map (tab2
-tab2-module) 6.48 kB [rendered]
[ng] chunk {tab3-tab3-module} tab3-tab3-module.js, tab3-tab3-module.js.map (tab3
-tab3-module) 6.49 kB [rendered]
[ng] chunk {tabs-tabs-module} tabs-tabs-module.js, tabs-tabs-module.js.map (tabs
-tabs-module) 9.92 kB [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.34 MB [initial] [rendere
d]
[ng]
[ng] ERROR in ./src/theme/variables.scss (./node_modules/@angular-devkit/build-a
ngular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-lo
ader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/the
me/variables.scss)
[ng] Module build failed (from ./node_modules/postcss-loader/src/index.js):
[ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query.
[ng] at unknownQuery (C:\Code\test2\node_modules\browserslist\index.js:137:1
0)
[ng] at C:\Code\test2\node_modules\browserslist\index.js:217:11
[ng] at Array.reduce ()
[ng] at resolve (C:\Code\test2\node_modules\browserslist\index.js:158:18)
[ng] at browserslist (C:\Code\test2\node_modules\browserslist\index.js:278:1
6)
[ng] at Browsers.parse (C:\Code\test2\node_modules\autoprefixer\lib\browsers
.js:66:12)
[ng] at new Browsers (C:\Code\test2\node_modules\autoprefixer\lib\browsers.j
s:48:26)
[ng] at loadPrefixes (C:\Code\test2\node_modules\autoprefixer\lib\autoprefix
er.js:85:20)
[ng] at plugin (C:\Code\test2\node_modules\autoprefixer\lib\autoprefixer.js:
96:20)
[ng] at LazyResult.run (C:\Code\test2\node_modules\postcss\lib\lazy-result.j
s:295:14)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:208:26)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:221:14)
[ng] at C:\Code\test2\node_modules\postcss\lib\lazy-result.js:213:17
[ng] ERROR in ./src/app/tab1/tab1.page.scss
[ng] Module build failed (from ./node_modules/postcss-loader/src/index.js):
[ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query.
[ng] at unknownQuery (C:\Code\test2\node_modules\browserslist\index.js:137:1
0)
[ng] at C:\Code\test2\node_modules\browserslist\index.js:217:11
[ng] at Array.reduce ()
[ng] at resolve (C:\Code\test2\node_modules\browserslist\index.js:158:18)
[ng] at browserslist (C:\Code\test2\node_modules\browserslist\index.js:278:1
6)
[ng] at Browsers.parse (C:\Code\test2\node_modules\autoprefixer\lib\browsers
.js:66:12)
[ng] at new Browsers (C:\Code\test2\node_modules\autoprefixer\lib\browsers.j
s:48:26)
[ng] at loadPrefixes (C:\Code\test2\node_modules\autoprefixer\lib\autoprefix
er.js:85:20)
[ng] at plugin (C:\Code\test2\node_modules\autoprefixer\lib\autoprefixer.js:
96:20)
[ng] at LazyResult.run (C:\Code\test2\node_modules\postcss\lib\lazy-result.j
s:295:14)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:208:26)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:221:14)
[ng] at C:\Code\test2\node_modules\postcss\lib\lazy-result.js:213:17
[ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/sr
c/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/postcss-loader/src/index.js):
[ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query.
[ng] at unknownQuery (C:\Code\test2\node_modules\browserslist\index.js:137:1
0)
[ng] at C:\Code\test2\node_modules\browserslist\index.js:217:11
[ng] at Array.reduce ()
[ng] at resolve (C:\Code\test2\node_modules\browserslist\index.js:158:18)
[ng] at browserslist (C:\Code\test2\node_modules\browserslist\index.js:278:1
6)
[ng] at Browsers.parse (C:\Code\test2\node_modules\autoprefixer\lib\browsers
.js:66:12)
[ng] at new Browsers (C:\Code\test2\node_modules\autoprefixer\lib\browsers.j
s:48:26)
[ng] at loadPrefixes (C:\Code\test2\node_modules\autoprefixer\lib\autoprefix
er.js:85:20)
[ng] at plugin (C:\Code\test2\node_modules\autoprefixer\lib\autoprefixer.js:
96:20)
[ng] at LazyResult.run (C:\Code\test2\node_modules\postcss\lib\lazy-result.j
s:295:14)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:208:26)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:221:14)
[ng] at C:\Code\test2\node_modules\postcss\lib\lazy-result.js:213:17
[ng] ERROR in ./src/app/tabs/tabs.page.scss
[ng] Module build failed (from ./node_modules/postcss-loader/src/index.js):
[ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query.
[ng] at unknownQuery (C:\Code\test2\node_modules\browserslist\index.js:137:1
0)
[ng] at C:\Code\test2\node_modules\browserslist\index.js:217:11
[ng] at Array.reduce ()
[ng] at resolve (C:\Code\test2\node_modules\browserslist\index.js:158:18)
[ng] at browserslist (C:\Code\test2\node_modules\browserslist\index.js:278:1
6)
[ng] at Browsers.parse (C:\Code\test2\node_modules\autoprefixer\lib\browsers
.js:66:12)
[ng] at new Browsers (C:\Code\test2\node_modules\autoprefixer\lib\browsers.j
s:48:26)
[ng] at loadPrefixes (C:\Code\test2\node_modules\autoprefixer\lib\autoprefix
er.js:85:20)
[ng] at plugin (C:\Code\test2\node_modules\autoprefixer\lib\autoprefixer.js:
96:20)
[ng] at LazyResult.run (C:\Code\test2\node_modules\postcss\lib\lazy-result.j
s:295:14)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:208:26)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:221:14)
[ng] at C:\Code\test2\node_modules\postcss\lib\lazy-result.js:213:17
[ng] at process._tickCallback (internal/process/next_tick.js:68:7)
[ng] ERROR in ./src/app/tab2/tab2.page.scss
[ng] Module build failed (from ./node_modules/postcss-loader/src/index.js):
[ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query.
[ng] at unknownQuery (C:\Code\test2\node_modules\browserslist\index.js:137:1
0)
[ng] at C:\Code\test2\node_modules\browserslist\index.js:217:11
[ng] at Array.reduce ()
[ng] at resolve (C:\Code\test2\node_modules\browserslist\index.js:158:18)
[ng] at browserslist (C:\Code\test2\node_modules\browserslist\index.js:278:1
6)
[ng] at Browsers.parse (C:\Code\test2\node_modules\autoprefixer\lib\browsers
.js:66:12)
[ng] at new Browsers (C:\Code\test2\node_modules\autoprefixer\lib\browsers.j
s:48:26)
[ng] at loadPrefixes (C:\Code\test2\node_modules\autoprefixer\lib\autoprefix
er.js:85:20)
[ng] at plugin (C:\Code\test2\node_modules\autoprefixer\lib\autoprefixer.js:
96:20)
[ng] at LazyResult.run (C:\Code\test2\node_modules\postcss\lib\lazy-result.j
s:295:14)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:208:26)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:221:14)
[ng] at C:\Code\test2\node_modules\postcss\lib\lazy-result.js:213:17
[ng] at process._tickCallback (internal/process/next_tick.js:68:7)
[ng] ERROR in ./src/app/tab3/tab3.page.scss
[ng] Module build failed (from ./node_modules/postcss-loader/src/index.js):
[ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query.
[ng] at unknownQuery (C:\Code\test2\node_modules\browserslist\index.js:137:1
0)
[ng] at C:\Code\test2\node_modules\browserslist\index.js:217:11
[ng] at Array.reduce ()
[ng] at resolve (C:\Code\test2\node_modules\browserslist\index.js:158:18)
[ng] at browserslist (C:\Code\test2\node_modules\browserslist\index.js:278:1
6)
[ng] at Browsers.parse (C:\Code\test2\node_modules\autoprefixer\lib\browsers
.js:66:12)
[ng] at new Browsers (C:\Code\test2\node_modules\autoprefixer\lib\browsers.j
s:48:26)
[ng] at loadPrefixes (C:\Code\test2\node_modules\autoprefixer\lib\autoprefix
er.js:85:20)
[ng] at plugin (C:\Code\test2\node_modules\autoprefixer\lib\autoprefixer.js:
96:20)
[ng] at LazyResult.run (C:\Code\test2\node_modules\postcss\lib\lazy-result.j
s:295:14)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:208:26)
[ng] at LazyResult.asyncTick (C:\Code\test2\node_modules\postcss\lib\lazy-re
sult.js:221:14)
[ng] at C:\Code\test2\node_modules\postcss\lib\lazy-result.js:213:17
[ng] at process._tickCallback (internal/process/next_tick.js:68:7)
[ng] ERROR in ./ansi-html 1:0
[ng] Module parse failed: Unexpected character ‘#’ (1:0)
[ng] You may need an appropriate loader to handle this file type.
[ng] > #!/bin/sh
[ng] | basedir=(dirname "(echo “$0” | sed -e ‘s,\,/,g’)")
[ng] |
[ng] i ?wdm?: Failed to compile.

1 Like
#2

Exactly same issue… but before yesterday “ionic server” run great. Maybe a component upgrade caused this error?

#3

Hey guys, Have you found any solution for this error ? Kindly let me know
Thank you

#4

No, no solution up to today.
I’ve understood the issue is related to node-sass. Tried to rebuild “npm rebuild node-sass --force” with these errors:

gyp info spawn args ‘C:\Windows\system32\node_modules\node-sass\build’,
gyp info spawn args ‘-Goutput_dir=.’ ]
gyp verb command build
gyp verb build type Release
gyp verb architecture x64
gyp verb node dev dir C:\Users\Alessandro.node-gyp\10.15.1
gyp verb found first Solution file build/binding.sln
gyp verb could not find “msbuild.exe” in PATH - finding location in registry
gyp info spawn C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe
gyp info spawn args [ ‘build/binding.sln’,
gyp info spawn args ‘/nologo’,
gyp info spawn args ‘/p:Configuration=Release;Platform=x64’ ]
MSBUILD : error MSB1009: il file di progetto non esiste.
Opzione: build/binding.sln
gyp ERR! build error
gyp ERR! stack Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe fail
ed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Windows\system32\node_modules\node
-sass\node_modules\node-gyp\lib\build.js:262:23)
gyp ERR! stack at ChildProcess.emit (events.js:189:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_proces
s.js:248:12)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command “C:\Program Files\nodejs\node.exe” “C:\Windows\system32\n
ode_modules\node-sass\node_modules\node-gyp\bin\node-gyp.js” “rebuild” “–v
erbose” “–libsass_ext=” “–libsass_cflags=” “–libsass_ldflags=” “–libsass_lib
rary=”
gyp ERR! cwd C:\Windows\system32\node_modules\node-sass
gyp ERR! node -v v10.15.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok

#5

I solved this issue by deleting three files named as browser.html, browser.cmd and ansi.html then project runs smoothly

1 Like
#6

Could you please write the full path (in windows) where these files are located? Thanks!

#7

Files are located in your Ionic v4 project means when you open your project folder there are folder like platforms, resources, src etc the files are present at this point in same hierarchy

#8

I guess it was an issue with paths within windows env. I tried to uninstall node.js and, most important, Android studio. With a fresh install of node.js and ionic… it works!