2

I am struggling with debugging my angular application. It is an application I inherited and struggling to find why it may not be working.

When I try debug my project open chrome debugger all I get is references to main.js

When I click on these it doesn't take me to the correct source code lines.

enter image description here

ZygD
  • 22,092
  • 39
  • 79
  • 102
Piotr Stulinski
  • 9,241
  • 8
  • 31
  • 46
  • 1
    Nobody can help you unless they see the code. `main.js` is build file so you won't see any linking to your source files unless its running in dev env. What can you do? Check the code and find this `avatar` in top to bottom approach starting from `app.component` – Beshambher Chaukhwan Jun 16 '21 at 17:24
  • Yeah, you seem to be looking at a production build. That won’t really be helpful. Use ng serve? – MikeOne Jun 16 '21 at 17:28
  • 3
    Just in case you're already using Angular 12: it uses the production build by default. Maybe that's why debugging doesn't work the way it used to be. – Stephan Rauh Jun 16 '21 at 17:41
  • I am using angular 12 - let me take a look. – Piotr Stulinski Jun 16 '21 at 18:17
  • Still scratching my head here - cant seem to find out why when clicking on the main.js it doesnt work - is there a command to force ng serve to run the debug build. – Piotr Stulinski Jun 16 '21 at 18:40
  • 1
    @StephanRauh thanks your answer helped me and i found this as well https://stackoverflow.com/questions/67647471/angular-12-source-map-is-missing-in-browser – Piotr Stulinski Jun 16 '21 at 18:43

2 Answers2

1

As pointed out in the comments. Angular 12 defaults to production mode and hence bundles the javascript files.

You can execute the below to run development from Angular 12 onwards.

ng serve --configuration development --live-reload
Piotr Stulinski
  • 9,241
  • 8
  • 31
  • 46
0

Your error appears because somewhere in your source code, your're trying to access a property of something that doesn't exist.

Do a global search inside your code ".avatar" and be sure the property called just before have a value.

// This works
const something = {
    avatar: 'https://myavatar.com'
}
const tryingToAccess = something.avatar;



// This doesn't work
const something; // avatar was not defined inside

const tryingToAccess = something.avatar; // No avatar property, so the same error will appear.
Ricardo Machado
  • 787
  • 1
  • 8
  • 16
  • Hi Ricardo - i do know this, sorry if i was not clear enough - i am trying to work out why the debugger is broken. All the debug line items are main.js and when i click on them do not go to the source code as they should. – Piotr Stulinski Jun 16 '21 at 18:16
  • 1
    Oh, sorry. Please, paste your angular.json here. – Ricardo Machado Jun 16 '21 at 19:19