Search code examples
angularlaravel-5source-maps

How to get source maps working in Angular 4 and Laravel 5.6 (.map files are missing after build)

I inherited a Laravel and Angular app, and I am trying come up to speed.

I run a shell script which basically compiles everything into the project's ./public folder and nginx serves the app from there.

Here is the script that builds everything:

./compile-js.sh

rm -rf ./public/*.{js,css,svg,woff2,ttf,woff,eot,map,json,html,txt}* ./public/fonts ./public/images ./angular-app/dist/
cd ./angular-app/
yarn install
yarn run build:dev
rm -f ./dist/*.{txt,map} #{txt,map}
cd ../
cp -r ./angular-app/dist/* ./public/

cssTemplate=./resources/views/angular/angular-css.blade.php
jsTemplate=./resources/views/angular/angular-js.blade.php

beginJs='<script type="text/javascript" src="'
endJs='"></script>'

beginInlineJs='<script type="text/javascript">'
endInlineJs='</script>'

beginStyle='<link rel="stylesheet" href="'
endStyle='"/>'

truncate -s 0 "$jsTemplate"
truncate -s 0 "$cssTemplate"

src="$(cat ./public/inlin*.bundle.js)"
echo "$beginInlineJs$src$endInlineJs" >> "$jsTemplate"

src="$(find ./public/ -name 'script*.bundle.js' -type f -exec basename {} \;)"
echo "$beginJs$src$endJs" >> "$jsTemplate"

src="$(cat ./public/sw-registe*.bundle.js)"
echo "$beginInlineJs$src$endInlineJs" >> "$jsTemplate"

src="$(find ./public/ -name 'polyfill*.bundle.js' -type f -exec basename {} \;)"
echo "$beginJs$src$endJs" >> "$jsTemplate"

src="$(find ./public/ -name 'vendo*.bundle.js' -type f -exec basename {} \;)"
echo "$beginJs$src$endJs" >> "$jsTemplate"

src="$(find ./public/ -name 'mai*.bundle.js' -type f -exec basename {} \;)"
echo "$beginJs$src$endJs" >> "$jsTemplate"

src="$(find ./public/ -name 'style*.bundle.css' -type f -exec basename {} \;)"
echo "$beginStyle$src$endStyle" >> "$cssTemplate"

Here are the scripts:

./angular-app/package.json

"build": "ng build --env=prod --prod --aot --output-path ./dist",
"build:dev": "ng build --sourcemap=true --extract-css --env=dev --output-path ./dist",

I just changed the shell script today to yarn run build:dev (it was previously running in prod mode, making debugging very hard). Now after, Chrome Dev Tools is reporting that source maps are detected, but I am also seeing in the console: 

DevTools failed to parse SourceMap: https://1.bundle.js.map
DevTools failed to parse SourceMap: https://2.bundle.js.map
DevTools failed to parse SourceMap: https://3.chunk.js.map

I see there are no .map files in the ./public folder, so this is probably why I am seeing this.

Where should I look to make Webpack create the map files?

  • my tsconfig.json file has "sourceMap": true,

  • there is no webpack:// area in the Dev Tools Sources Tab

Solution

  • Found the answer. The reason is in the shown ./compile-js.sh file.

    This is the culprit here:

    rm -f ./dist/*.{txt,map} #{txt,map}

    It was creating the map files and then deleting them before copying everything to ./public.

    Changed it to this and it fixed it:

    rm -f ./dist/*.{txt} #{txt}

    I'm using this dev script now also:

    "build:dev": "ng build --source-map --aot --extract-css --env=dev --output-path ./dist",

    Rather than delete this question, I will keep it because searching Google for information about this stuff was pretty terrible. Maybe it will help someone one day.