Error in css-loader building Angular 4 app for production

3
votes

I can compile and build an application using 'ng build', but when I try to run 'ng build --prod --aot=false' to build it for production, I get a really confusing error, which is:

devrep@dev-laptop:~/Documents/projects/FWP$ ng build --prod --aot=false 11% building modules 9/14 modules 5 active ...font-awesome/css/font-awesome.min.cssNode#moveTo was deprecated. Use Container#append. Date: 2017-12-21T12:09:04.162Z
Hash: 4aab95fe772649d00bd9 Time: 64798ms chunk {0} polyfills.87365c933937cb2f588a.bundle.js (polyfills) 65.8 kB [initial] [rendered] chunk {1} main.7c8cba86955be3d0b56d.bundle.js (main) 687 kB [initial] [rendered] chunk {2} styles.6794b28885d6e9fad13b.bundle.css (styles) 170 kB [initial] [rendered] chunk {3} vendor.e43732721f7d20b3cde5.bundle.js (vendor) 771 kB [initial] [rendered] chunk {4} inline.d266a3c997900449849a.bundle.js (inline) 1.45 kB [entry] [rendered]

ERROR in ./src/app/integralui/css/integralui.module.css
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './.' in

'/home/devrep/Documents/projects/FWP/src/app/integralui/css' at factoryCallback (/home/devrep/Documents/projects/FWP/node_modules/webpack/lib/Compilation.js:276:40) at factory (/home/devrep/Documents/projects/FWP/node_modules/webpack/lib/NormalModuleFactory.js:235:20) at resolver (/home/devrep/Documents/projects/FWP/node_modules/webpack/lib/NormalModuleFactory.js:60:20) at asyncLib.parallel (/home/devrep/Documents/projects/FWP/node_modules/webpack/lib/NormalModuleFactory.js:127:20) at /home/devrep/Documents/projects/FWP/node_modules/async/dist/async.js:3861:9 at /home/devrep/Documents/projects/FWP/node_modules/async/dist/async.js:421:16 at iteratorCallback (/home/devrep/Documents/projects/FWP/node_modules/async/dist/async.js:996:13) at /home/devrep/Documents/projects/FWP/node_modules/async/dist/async.js:906:16 at /home/devrep/Documents/projects/FWP/node_modules/async/dist/async.js:3858:13 at resolvers.normal.resolve (/home/devrep/Documents/projects/FWP/node_modules/webpack/lib/NormalModuleFactory.js:119:22) at onError (/home/devrep/Documents/projects/FWP/node_modules/enhanced-resolve/lib/Resolver.js:65:10) at loggingCallbackWrapper (/home/devrep/Documents/projects/FWP/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at runAfter (/home/devrep/Documents/projects/FWP/node_modules/enhanced-resolve/lib/Resolver.js:158:4) at innerCallback (/home/devrep/Documents/projects/FWP/node_modules/enhanced-resolve/lib/Resolver.js:146:3) at loggingCallbackWrapper (/home/devrep/Documents/projects/FWP/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at next (/home/devrep/Documents/projects/FWP/node_modules/tapable/lib/Tapable.js:252:11) @ ./src/app/integralui/css/integralui.module.css @ multi ./src/styles.css ./src/assets/zurb-foundation/foundation-prototype.min.css ./src/assets/fwcIcons-font/css/fwcIcons.css ./src/assets/fwcMenuIcons-font/css/fwcMenuIcons.css ./src/app/integralui/css/integralui.module.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/ng2-toastr/bundles/ng2-toastr.min.css ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null,{"version":"5.2.18","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"cssnano","postcssVersion":"5.2.18"}],"sourceMap":false}!./src/app/integralui/css/integralui.grid-default.css Module not found: Error: Can't resolve './.' in '/home/devrep/Documents/projects/FWP/src/app/integralui/css' resolve './.' in '/home/devrep/Documents/projects/FWP/src/app/integralui/css' using description file: /home/devrep/Documents/projects/FWP/package.json (relative path: ./src/app/integralui/css) Field 'browser' doesn't contain a valid alias configuration after using description file: /home/devrep/Documents/projects/FWP/package.json (relative path: ./src/app/integralui/css) using description file: /home/devrep/Documents/projects/FWP/package.json (relative path: ./src/app/integralui/css) no extension Field 'browser' doesn't contain a valid alias configuration /home/devrep/Documents/projects/FWP/src/app/integralui/css is not a file .ts Field 'browser' doesn't contain a valid alias configuration /home/devrep/Documents/projects/FWP/src/app/integralui/css.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /home/devrep/Documents/projects/FWP/src/app/integralui/css.js doesn't exist as directory existing directory using path: /home/devrep/Documents/projects/FWP/src/app/integralui/css/index using description file: /home/devrep/Documents/projects/FWP/package.json (relative path: ./src/app/integralui/css/index) no extension Field 'browser' doesn't contain a valid alias configuration /home/devrep/Documents/projects/FWP/src/app/integralui/css/index doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /home/devrep/Documents/projects/FWP/src/app/integralui/css/index.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /home/devrep/Documents/projects/FWP/src/app/integralui/css/index.js doesn't exist [/home/devrep/Documents/projects/FWP/src/app/integralui/css] [/home/devrep/Documents/projects/FWP/src/app/integralui/css.ts] [/home/devrep/Documents/projects/FWP/src/app/integralui/css.js] [/home/devrep/Documents/projects/FWP/src/app/integralui/css/index] [/home/devrep/Documents/projects/FWP/src/app/integralui/css/index.ts] [/home/devrep/Documents/projects/FWP/src/app/integralui/css/index.js] @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null,{"version":"5.2.18","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"cssnano","postcssVersion":"5.2.18"}],"sourceMap":false}!./src/app/integralui/css/integralui.grid-default.css 6:9668-9682 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null,{"version":"5.2.18","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"cssnano","postcssVersion":"5.2.18"}],"sourceMap":false}!./src/app/integralui/css/integralui.grid.css @ ./src/app/integralui/css/integralui.module.css @ multi ./src/styles.css ./src/assets/zurb-foundation/foundation-prototype.min.css ./src/assets/fwcIcons-font/css/fwcIcons.css ./src/assets/fwcMenuIcons-font/css/fwcMenuIcons.css ./src/app/integralui/css/integralui.module.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/ng2-toastr/bundles/ng2-toastr.min.css

I've tried some solutions that I found on Google, like copying all the CSS files into the 'assets' folder or updating the Angular CLI bit it didn't make a change. I can't understand what's complaining about and what's that './.' module that can't be found.

Any clue?

I'm using node 9.3.0, npm 5.6.0 and Angular CLI 1.6.2 with Angular 4.4.6.

Thanks!

2
angularangular-cli
hard to tell but it may be with your webpack configuration. github.com/react-toolbox/react-toolbox/issues/… – B.Y

2 Answers

2
votes

The problem was an incorrect CSS file in one of the components used in the application. And it was this single line:

background: url('') no-repeat 0 0;

We left the URL empty by mistake and it seems that the compiler couldn't build the app for production (although it compiles perfectly for development).

Cheers,

0
votes

Please update "@angular/cli" to "1.7.3"

  1. npm remove @angular/cli
  2. npm cache clean --force
  3. npm install -g @angular/[email protected]

Still stuck then update your package.json with

@angular/cli": "1.7.3"

Then run npm install

Tested and working for me