Angular 5 – Why can’t I see all my TypeScript models in Chrome’s debugger?

I’m trying to debug my Angular 5 app in Chrome.

I’ve created it using ng cli, and I’m running it using ng serve.

My models folder has 7 TypeScript files / classes and a sub-folder containing 4 files / classes, but in Chrome’s Developer Tools I only see a total of 3 files.

enter image description here

Any ideas why?

Note: I will provide more information as required… As an Angular beginner, I just don’t know what other information you would need to answer this, so feel free to ask.

Angular CLI // TypeScript // Chrome Debugging > Arrow function loses context

I’m struggling since a few days with a problem I can’t explain:

  • I have an Angular 4 CLI project running fine
  • I have an arrow function in one of my component’s method that sets a property in my component
  • When I put a breakpoint in Chrome devtools (or VS Code debugger against Chrome, same behavior) in my arrow function, the this context is not binded to the component
  • BUT if I execute the code, it works well

Example code:

export class MyComponent {

  private message = 'Im here!';

  constructor() {
    const test = () => {
      console.log(this.message);
    };

    test();
  }

}

If I put a breakpoint on line with console.log(this.message), the this context will be undefined in the debugger watch, but at execution it will write ‘Im here!’ in my console.

Have you ever experienced this problem before? Is there a problem with my sourcemaps, idk?