Editing npm package locally in Angular 13

Question

I have an Angular app (v13.3.10) and I'm using the ngx-markdown package as a dependency. I'm finding a lot of bugs in this package. To fix this, I'm trying to edit it locally and view changes in-browser when running ng serve. But webpack seems to always take an unedited version of the source files in this package. (this package unfortunately doesn't have a dist folder).

Researching this, I tried both using patch-package (setting a postinstall script) as well as disabling angular CLI's build cache. But no matter what, Webpack stays firm and doesn't apply local changes on ng serve.

Why does webpack not let me change source files to view in localhost? What else can I do from here?

Answer 1

Going to answer my own question here. The issue is that the ngx-markdown package is an Angular library. Angular has webpack configured such that no libraries are allowed to be edited. The best you can do is either:

1. Fork, make edits, import as a custom angular library
2. Send a pull request to the original repo and wait for a merge.

Answer 2

1. Change your node module name
2. Then in terminal run npm i
3. Now you get new node module file
4. then run your code ng serve

Answer 3

Can you make the same changes that were made in src folder to the file in esm2020, fesm 2020 folders. Those are the files referenced by webpack.