在构建Angular 4应用程序的生产环境时,css-loader出现错误

3

我可以使用 'ng build' 编译和构建应用程序,但是当我尝试运行 'ng build --prod --aot=false' 为生产环境构建时,出现了一个非常令人困惑的错误,即:

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

我尝试了一些在Google上找到的解决方案,比如将所有的CSS文件复制到“assets”文件夹中或者更新Angular CLI版本,但都无济于事。我不明白它在抱怨什么,以及那个“./。”模块为什么找不到。
有什么线索吗?
我正在使用node 9.3.0、npm 5.6.0和Angular CLI 1.6.2与Angular 4.4.6。
谢谢!

很难说,但可能与你的webpack配置有关。 - B.Y
2个回答

2
问题出在应用程序中使用的一个组件中的CSS文件错误。而问题就在这一行代码上:
background: url('') no-repeat 0 0;

我们不小心把URL留空了,似乎编译器无法为生产构建应用程序(尽管它可以完美地为开发进行编译)。

祝好!


0
请将 "@angular/cli" 更新至 "1.7.3"
  1. npm remove @angular/cli
  2. npm cache clean --force
  3. npm install -g @angular/cli@1.7.3

如果还卡住不动,请更新您的 package.json 文件

@angular/cli": "1.7.3"

然后运行npm install

我已经测试并且可以正常工作


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接