Angular Universal SSR And Debug Setting In Webstorm

Introduction

When SSR in angular by angular universal, debug setting is not set for typescript by default. To use debugger of webstorm, you should change some config files of your project.

Webstorm Deubber setting

npm debug setting. Script to run is serve:ssr

How to debug setting in webstorm

Source Map

Add source map setting to angular.json, and webpack.server.config.js

angular.json

Change angular.json sourceMap: false to sourceMap: true

angular.json

"server": {
   "configurations": {
      "production": {
         "sourceMap": true
      }
   }  
}

webpack.server.config.js

Add devtool: 'source-map'

webpack.server.config.js

module.exports = {
   devtool: 'source-map'
}