Changes made in files under node_modules

Question

I have changed some files present in node_modules folder. But when I build the application using ng build -op="app" --base -href="dist" --aot and when I deploy it to server I see the changes that I made in node_modules were not there. How to overcome this?

I have tried in the below 3 ways

1. I have forked the ngx-bootstrap repository into GIT Then I have used npm install https://github.com/krishnag9/ngx-bootstrap/tarball/master in my project. I have changed import { BsDaterangepickerDirective } from 'ngx-bootstrap/datepicker' to import { BsDaterangepickerDirective } from 'ngx-bootstrap-base/src/datepicker' I'm facing the below exception now

   ERROR in./node_modules/ngx-bootstrap-base/src/index.ts Module build failed: Error: NPMLINK_TEST/node_modules/ngx-bootstrap-base/src/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format at AngularCompilerPlugin.getCompiledFile (NPMLINK_TEST/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:656:23) at plugin.done.then (NPMLINK_TEST/node_modules/@ngtools/webpack/src/loader.js:467:39) at <anonymous> at process._tickCallback (internal/process/next_tick.js:182:7) @./src/app/app.module.ts 49:12-45 54:12-45 @./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:0./src/main.ts ERROR in./node_modules/ngx-bootstrap-base/src/modal/index.ts Module build failed: Error: NPMLINK_TEST/node_modules/ngx-bootstrap-base/src/modal/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format at AngularCompilerPlugin.getCompiledFile (NPMLINK_TEST/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:656:23) at plugin.done.then (NPMLINK_TEST/node_modules/@ngtools/webpack/src/loader.js:467:39) at <anonymous> at process._tickCallback (internal/process/next_tick.js:182:7) @./src/app/canceltickets/canceltickets.component.ts 21:14-53 22:14-53 @./src/app/app.module.ts @./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:0./src/main.ts

2. Also I have tried npm install https://github.com/krishnag9/ngx-bootstrap --save-dev ended up with below error

   ERROR in node_modules/ngx-bootstrap-base/src/mini-ngrx/state.class.ts(5,39): error TS2305: Module '"NPMLINK_TEST/node_modules/rxjs/Rx"' has no exported member 'queueScheduler'. node_modules/ngx-bootstrap-base/src/tooltip/tooltip.directive.ts(20,10): error TS2305: Module '"NPMLINK_TEST/node_modules/rxjs/Rx"' has no exported member 'timer'. node_modules/ngx-bootstrap-base/src/typeahead/typeahead.directive.ts(18,10): error TS2305: Module '"NPMLINK_TEST/node_modules/rxjs/Rx"' has no exported member 'from'.

3. Using npm link I have cloned the git repository outside of my node_modules Next cd ngx-bootstrap I have executed the command npm link Redirected to node_modules folder Here I did npm link ngx-bootstrap No errors in my console, But the code I have changed is not reflected there and also facing an exception in browser console

   BsDatepickerContainerComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'schedule' of undefined at ObserveOnSubscriber.scheduleMessage (observeOn.js:99) at ObserveOnSubscriber._error (observeOn.js:105) at ObserveOnSubscriber.Subscriber.error (Subscriber.js:105) at BehaviorSubject.Observable._trySubscribe (Observable.js:177) at BehaviorSubject.Subject._trySubscribe (Subject.js:97) at BehaviorSubject.Observable.subscribe (Observable.js:160) at ObserveOnOperator.call (observeOn.js:74) at AnonymousSubject.Observable.subscribe (Observable.js:157) at ScanOperator.call (scan.js:72) at AnonymousSubject.Observable.subscribe (Observable.js:157)

Answer 1

If you just have to change the icon, You can do it like this. Whenever datepicker is triggered you can just add below lines.

document.querySelector(".previous span").innerHTML = "<="

document.querySelector(".next span").innerHTML = "=>"

you can change "=>" with whatever icon you want to use.

To check this. Go to https://valor-software.com/ngx-bootstrap/#/datepicker

Then Open any Date Picker and Open console and paste this into console document.querySelector(".next span").innerHTML = "=>"

see that next icon changes to =>

Answer 2

You can use npm patch-package to share and persist changes in node_modules . Although reply below is in React/React Native section of Stack-overflow, it works for all npm stuff:

https://stackoverflow.com/a/68871879/11583616

Answer 3

This depends on how you build your app, probably your webpack config. Show us your webpack config, you should configure your loader to include the module.