Angular: How to know what is causing this huge space allocation in html file in Source Map Explorer

Question

I am trying to optimize an angular application and I am using Source Map Explorer to identify which part of my application is taking a lot of space.

Command to build my angular project:

ng build --configuration=dev --source-map

Configuration for dev:

"dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": false,
                  "inlineCritical": true
                },
                "fonts": true
              },
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            },

Command to create Source Map Explorer:

source-map-explorer dist/**/*.js

When I go to source map explorer output, I found that around 4mb is taken by an html file which is just a sidebar component.

I need to know what's causing this space allocation in an html file?

Thanks