Seeking a setup that allows me to connect an Angular library on my development machine using npm link while utilizing breakpoints.
My current setup involves running
ng build --watch --configuration developmentdist/library-name folder to my Angular 15 application. This works well for hot reload; any changes made in the library automatically trigger a reload of the running application.
The structure of my library component closely resembles the provided template:
@Component({
selector: 'lib-mfe-sel',
template: ` <p>mfe-sel works!!!!!!</p> `,
styles: [],
})
export class MfeSelComponent implements OnInit {
ngOnInit(): void {
console.log('Component initialized.');
}
}
For testing purposes, I have created an instance and manually invoked 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';
}
When attempting to use Visual Studio Codes' Go To Definition, it correctly navigates to the source file. However, setting breakpoints results in an Unbound Breakpoint. Setting a breakpoint at component.ngOnInit(); and trying to Step Into leads to landing in the vendor.js file.
Despite having properly generated all source maps in my library, debugging seems to be impossible. Any thoughts or ideas on why this may be the case?