Search code examples
angularwebpackangular-cliangular-bootstrap

Broken styles when Angular-CLI serves application using webpack

I have a weird problem when I try to serve my angular application with angular CLI.

When I run ng serve, I get the following message after the compilation :

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

Then, if I open my application in the browser, it works but almost all styles are broken (mainly the bootstrap styles).

I found a similar issue here : Build angular2 app with webpack - can't find ./compiler.es5.ts

However, I don't have any webpack.config.js in my project.

Also, we are 5 to work on this angular project and I am the only one to have this error.

Does anyone have an idea on how I could solve this problem ?

Solution

  • Angular-CLI embarks webpack, so most probably your webpack configuration is located in your .angular-cli.json file, but if it worked without any issue before and you didn't change anything, I'd suggest you try to delete your folder node_modules, uninstall / reinstall @angular/cli globally (https://github.com/angular/angular-cli#updating-angular-cli) and try to serve your application again.