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

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

我在这里发现了一个类似的问题：Build angular2 app with webpack - can't find ./compiler.es5.ts

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

另外，我们有 5 年的时间来处理这个 Angular 项目，而我是唯一遇到此错误的人。

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

Answer 1

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