Angular not showing errors properly

Question

In my angular app, it does not show errors properly. It always shows errors in main.js instead of component and line number like it shows on my other angular applications. Please check this screenshot

Here is my angular.json. It looks like it's missing development configuration.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": "fadcd178-4e22-400b-975d-788758cb58bf"
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "route-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/route-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.scss",
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
              "src/app/themes/styles/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "2mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "5kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "route-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "route-app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "route-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "../node_modules/ngx-simple-modal/styles/simple-modal.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "route-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "route-app:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "route-app"
}

and here is my packages.json

{
  "name": "route-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    
  }
}

Please help.

Thank you

Answer 1

The configuration in the angular.json file should enable the source map for the environment you are working with, for instance, to map the errors in the "dev" environment:

configuration:{
     ...,        
    "dev":{ 
        ...,    
        "sourceMap": true,
        ...
    },
    ...,
}
    

Without the "sourceMap" : true, the error will not be traced to the specific source file. This parameter can be assigned a boolean or an object, but "true" should be enough to solve your problem, as descibed in the official documentation:

https://angular.io/guide/workspace-config#source-map-configuration

Answer 2

Add development configuration like this.

        "build": {
             :
          "configurations": {
            "production": {
               :
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          }
        }
        "serve": {
            :
          "configurations": {
            "production": {
              "browserTarget": "route-app:build:production"
            },
            "development": {
              "browserTarget": "route-app:build:development"
            }
          }

Then start your app with ng serve -c development.