source file (.ts) not showing up in the dev tool after deployment

Question

I am only able to see the .ts source file in my local but after I deploy it, I cannot see them in any environment. I already have my sourcemap set to true and have also set my browserTarget under serve. It is still not working. Please help!

Here is my angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "UI-App": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "@fabric/components/legacy-theme.css",
              "@fabric/components/theme.css",
              "@fabric/primeng-styles/light-theme.css",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/primeng.min.css",
              "./node_modules/primeflex/primeflex.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "allowedCommonJsDependencies": ["color"]
          },
          "defaultConfiguration": "production",
          "configurations": {
            "production": {
              "optimization": {
                "scripts": true,
                "styles": true,
                "fonts": false
              },
              "outputHashing": "all",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ui-angular-demo:build",
            "host": "localhost.gm.com",
            "ssl": true,
            "port": 8081
          },
          "configurations": {
            "production": {
              "browserTarget": "UI-App:build:production"
            },
            "development": {
              "browserTarget": "UI-App:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "UI-App:build"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": ["@angular-eslint/schematics"]
  },
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss",
      "standalone": true
    },
    "@schematics/angular:directive": {
      "standalone": true
    },
    "@schematics/angular:pipe": {
      "standalone": true
    },
    "@schematics/angular:application": {
      "strict": true
    },
    "@angular-eslint/schematics:application": {
      "setParserOptionsProject": true
    },
    "@angular-eslint/schematics:library": {
      "setParserOptionsProject": true
    }
  }
}

And here is the snippet of my package.json

"name": "UI-App",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "jest",
    "lint": "ng lint",
    "lint:fix": "ng lint --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src",
    "e2e": "ng e2e",
    "clean": "node scripts/clean.mjs"
  },

This is my devtool in my local. I am able to see the src folder. This is my devtool after i deployed my app. Not able to see the src folder. So, when I do Ctrl+P I cannot select any files. This is my dev tool for a different app that is displying the folder structure after deploying my app to the Dev environment. I need to be able see this folder structure after deploying it to any environment for debugging purpose. But Currently I only see the folder structure when I am working in my local.

Answer 1

Source map files allow dev tools to "convert" the JS files back to TS.

They're not really readable on their own.

If you wish to obtain the same result as your local environment when you build, then you should run

npx ng serve -c development 

This will use the development environment, which is the one configured to keep the source files in your config.

To be noted, it is advised not to do that for a production build.