How can I debug an Angular Library which is locally linked with `npm link`?

Question

I am trying to find a setup, where I can link an Angular library on my development machine by using npm link and using breakpoints.

My setup so far will start ng build --watch --configuration development in the library and than link the dist/library-name folder to my Angular 15 application. This work very well in regards to hot reload. When I start the application and change something in the library, the running application will automatically reload the page.

My library component is almost the same as the template provided:

@Component({
    selector: 'lib-mfe-sel',
    template: ` <p>mfe-sel works!!!!!!</p> `,
    styles: [],
})
export class MfeSelComponent implements OnInit {
    ngOnInit(): void {
        console.log('Component initialized.');
    }
}

Just for testing purposes I have simply created an instance and manually call the ngOnInit method in my application component.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const component = new MfeSelComponent()
    component.ngOnInit();
  }
  title = 'test-15';
}

Now when I use Visual Studio Codes Go To Definition it will correctly jump to the source file. But when I set the breakpoint it is an Unbound Breakpoint. And if I set the breakpoint at the line component.ngOnInit(); and Step Into I will land in the vendor.js file.

My library has generated all source maps correctly and I do not know why debugging is not possible. Do you have any idea?

Answer 1

It was a simple mistake in not reading the documentation carefully enough. I had to replace

projects: {
  app: {
    architect: {
      build: {
        configurations: {
          development: {
            "sourceMap": true
          }
        }
      }
    }
  }
}

with

projects: {
  app: {
    architect: {
      build: {
        configurations: {
          development: {
            "scripts": true,
            "styles": true,
            "hidden": false,
            "vendor": true
          },
        }
      }
    }
  }
}

and I was landing in the vendor.js because I had to start it with ng serve --host=127.0.0.1 instead of ng serve.