Angular-CLI 使用 webpack 为应用程序提供服务时样式损坏

Question

当我尝试使用 angular CLI 为我的 angular 应用程序提供服务时，我遇到了一个奇怪的问题。

当我运行 ng serve 时，我在编译后得到以下消息：

WARNING in C:/Users/tsnr1214/Documents/workspace3/my-project/node_modules/@angular/compiler/@angular/compiler.es5.js
(Emitted value instead of an instance of Error) Cannot find source file 'compiler.es5.ts': Error: Can't resolve './compiler.es5.ts' in 'C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\@angular\compiler\@angular'
NonErrorEmittedError: (Emitted value instead of an instance of Error) Cannot find source file 'compiler.es5.ts': Error: Can't resolve './compiler.es5.ts' in 'C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\@angular\compiler\@angular'
    at emitWarning (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\webpack\lib\NormalModule.js:116:16)
    at C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\source-map-loader\index.js:65:7
    at onError (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:65:10)
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at runAfter (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:158:4)

    at innerCallback (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\tapable\lib\Tapable.js:252:11)
    at C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at runAfter (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:158:4)

    at innerCallback (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\tapable\lib\Tapable.js:252:11)
    at innerCallback (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:144:11)
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
@ C:/Users/tsnr1214/Documents/workspace3/my-project/node_modules/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 7:0-72
@ C:/Users/tsnr1214/Documents/workspace3/my-project/src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

WARNING in C:/Users/tsnr1214/Documents/workspace3/my-project/node_modules/swiper/dist/js/swiper.js
(Emitted value instead of an instance of Error) Cannot find SourceMap 'maps/swiper.js.map': Error: Can't resolve './maps/swiper.js.map' in 'C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\swiper\dist\js'
NonErrorEmittedError: (Emitted value instead of an instance of Error) Cannot find SourceMap 'maps/swiper.js.map': Error: Can't resolve './maps/swiper.js.map' in 'C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\swiper\dist\js'
    at emitWarning (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\webpack\lib\NormalModule.js:116:16)
    at Object.<anonymous> (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\source-map-loader\index.js:35:6)
    at onError (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:65:10)
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at runAfter (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:158:4)

    at innerCallback (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\tapable\lib\Tapable.js:252:11)
    at C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at runAfter (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:158:4)

    at innerCallback (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\tapable\lib\Tapable.js:252:11)
    at innerCallback (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\Resolver.js:144:11)
    at loggingCallbackWrapper (C:\Users\tsnr1214\Documents\workspace3\my-project\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
@ C:/Users/tsnr1214/Documents/workspace3/my-project/node_modules/ng-boosted/o-carousel/o-carousel-container.component.js 10:13-30
@ C:/Users/tsnr1214/Documents/workspace3/my-project/node_modules/ng-boosted/index.js
@ C:/Users/tsnr1214/Documents/workspace3/my-project/src/app/app.module.ts
@ C:/Users/tsnr1214/Documents/workspace3/my-project/src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

然后，如果我在浏览器中打开我的应用程序，它可以工作，但几乎所有样式都已损坏（主要是 bootstrap 样式）。

我在这里发现了类似的问题：

但是，我的项目中没有任何 webpack.config.js。

此外，我们有 5 人参与这个 angular 项目，而我是唯一遇到此错误的人。

有人知道我该如何解决这个问题吗？

Answer 1

Angular-CLI 启动了 webpack，所以很可能你的 webpack 配置位于你的 .angular-cli.json 文件中，但如果它之前没有任何问题并且你没有改变任何东西，我' d 建议您尝试删除您的文件夹 node_modules，全局卸载/重新安装 @angular/cli (https://github.com/angular/angular-cli#updating-angular-cli)，然后尝试再次为您的应用程序提供服务。

Angular-CLI 使用 webpack 为应用程序提供服务时样式损坏

Broken styles when Angular-CLI serves application using webpack

angular-bootstrap

webpack

angular-cli

angular