Angular-cli: [beta.31] ng serve error on css-loader, postcss-loader, sass-loader

[niilante]

Please provide us with the following information:

OS?

Windows 10.

Versions.

@angular/cli: 1.0.0-beta.31
node: 7.2.0
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.8

Repro steps.

First, App created using CLI(angular-cli 1.0.0-beta.24), but I recently upgraded to (1.0.0-beta.31)
I haven't commented on the error part.

angular-cli.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"version": "1.0.0-beta.31",
"name": "ordcli"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"assets/images/favicon/favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css",
"assets/revo-slider/css/settings-custom.css",
"assets/css/bootstrap.min.css",
"assets/css/icons-fonts.css",
"assets/css/style.css",
"assets/css/animate.min.css"
],
"scripts": [
"assets/js/jquery.min.js",
"assets/js/bootstrap.min.js",
"assets/js/isotope.pkgd.min.js",
"assets/js/imagesloaded.pkgd.min.js",
"assets/js/masonry.pkgd.min.js",
"assets/js/jquery.appear.js",
"assets/js/owl.carousel.min.js",
"assets/js/main.js",
"assets/revo-slider/js/jquery.ordstores.tools.min.js",
"assets/revo-slider/js/jquery.ordstores.revolution.min.js",
"assets/revo-slider/js/extensions/revolution.extension.actions.min.js",
"assets/revo-slider/js/extensions/revolution.extension.carousel.min.js",
"assets/revo-slider/js/extensions/revolution.extension.kenburn.min.js" ,
"assets/revo-slider/js/extensions/revolution.extension.layeranimation.min.js" ,
"assets/revo-slider/js/extensions/revolution.extension.migration.min.js" ,
"assets/revo-slider/js/extensions/revolution.extension.navigation.min.js" ,
"assets/revo-slider/js/extensions/revolution.extension.parallax.min.js" ,
"assets/revo-slider/js/extensions/revolution.extension.slideanims.min.js" ,
"assets/revo-slider/js/extensions/revolution.extension.video.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src//.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e//.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}

The log given by the failure.

$ ng serve
* NG Live Development Server is running on http://localhost:4200. *
11% building modules 10/10 modules 0 active(node:6476) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils. Hash: 43dc69aef0c93633dad0 Time: 39500ms
chunk {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 153 kB {5} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.map (main) 89.6 kB {4} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.map (styles) 672 kB {5} [initial] [rendered]
chunk {3} scripts.bundle.js, scripts.bundle.map (scripts) 605 kB {5} [initial] [rendered]
chunk {4} vendor.bundle.js, vendor.bundle.map (vendor) 3.83 MB [initial] [rendered]
chunk {5} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

WARNING in ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/revo-slider/css/settings-custom.css
autoprefixer: D:\ordcli\src\assets\revo-slider\css\settings-custom.css:436:2: Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.
 @ ./src/assets/revo-slider/css/settings-custom.css 4:14-164
 @ multi ./src/styles.css ./src/assets/revo-slider/css/settings-custom.css ./src/assets/css/bootstrap.min.css ./src/assets/css/icons-fonts.css ./src/assets/css/style.css ./src/assets/css/animate.min.css

ERROR in ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css
Module not found: Error: Can't resolve '../images/caret.png' in 'D:\ordcli\src\assets\css'
 @ ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css 6:176608-176638
 @ ./src/assets/css/style.css
 @ multi ./src/styles.css ./src/assets/revo-slider/css/settings-custom.css ./src/assets/css/bootstrap.min.css ./src/assets/css/icons-fonts.css ./src/assets/css/style.css ./src/assets/css/animate.min.css

ERROR in ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css
Module not found: Error: Can't resolve '../images/box-icons.png' in 'D:\ordcli\src\assets\css'
 @ ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css 6:201635-201669
 @ ./src/assets/css/style.css
 @ multi ./src/styles.css ./src/assets/revo-slider/css/settings-custom.css ./src/assets/css/bootstrap.min.css ./src/assets/css/icons-fonts.css ./src/assets/css/style.css ./src/assets/css/animate.min.css

ERROR in ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css
Module not found: Error: Can't resolve '../images/list-icons.png' in 'D:\ordcli\src\assets\css'
 @ ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css 6:217699-217734
 @ ./src/assets/css/style.css
 @ multi ./src/styles.css ./src/assets/revo-slider/css/settings-custom.css ./src/assets/css/bootstrap.min.css ./src/assets/css/icons-fonts.css ./src/assets/css/style.css ./src/assets/css/animate.min.css

ERROR in ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css
Module not found: Error: Can't resolve '../images/icon-get-theme.png' in 'D:\ordcli\src\assets\css'
 @ ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css 6:241252-241291
 @ ./src/assets/css/style.css
 @ multi ./src/styles.css ./src/assets/revo-slider/css/settings-custom.css ./src/assets/css/bootstrap.min.css ./src/assets/css/icons-fonts.css ./src/assets/css/style.css ./src/assets/css/animate.min.css

ERROR in ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css
Module not found: Error: Can't resolve '../images/f-box4-bg.png' in 'D:\ordcli\src\assets\css'
 @ ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./src/assets/css/style.css 6:262061-262095
 @ ./src/assets/css/style.css
 @ multi ./src/styles.css ./src/assets/revo-slider/css/settings-custom.css ./src/assets/css/bootstrap.min.css ./src/assets/css/icons-fonts.css ./src/assets/css/style.css ./src/assets/css/animate.min.css
webpack: Failed to compile.

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[splurtcake]

Following, I have similar issues

[mayvazyan]

I had a similar issue after upgrading angular-cli from beta.26 to rc.1. For me the fix was to remove node_modules folder, and then reinstall packages using npm install.

[filipesilva]

Well looking at your log, it says you have a bunch of path errors like

Module not found: Error: Can't resolve '../images/f-box4-bg.png' in 'D:\ordcli\src\assets\css' and

And a warning about an outdated syntax.

autoprefixer: D:\ordcli\src\assets\revo-slider\css\settings-custom.css:436:2: Gradient has outdated direction syntax. New syntax is liketo leftinstead ofright.

One of the new additions in the CLI was CSS resource processing, so images are now processed. Try fixing the paths to be relative.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}