If you are an Angular developer, you’ve probably noticed that since Angular 2+ they break with almost every release. After wasting many hours in futile attempts to fix them and going through numerous report on Angular GitHub page I finally got to a setup that works.

Fixing dependencies (vendor) sourcemaps

1. Open angular.json and find targets->build->configurations
2. Add a new configuration after production. Name it serve.

   "configurations": {
     "production": {
       ...
     }
     "serve": {
       "extractCss": true
     }
   

3. Change serve task to use the new config by changing targets->serve->options

   "options": {
     "browserTarget": "PROJECT_NAME:build:serve"
   

4. Open package.json and update start scripts

   "scripts: {
       ...
       "start": "ng serve --source-map --vendor-source-map --ssl",
   }
   

5. Run your project with npm start. Inspect your markup. You’ll see dependencies SCSS using the source maps and showing correct paths.

Continue reading Working SCSS Sourcemaps with Angular 6 →