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

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
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'.
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)

Why are you changing the node_modules files? This is a horrible practice with so many (and unpredictable) side effects — Christian Benseler, May 08 '18 at 18:52
I can't find any other way!! Just small change. I think so It won't effect the existing features. — Krishna, May 09 '18 at 05:21
If you change a file inside node_modules, every time anyone runs "npm install" inyour project those files will be overwritten. Do not do this. If you need, clone the original repo, do the changes there and change the dependency in the package.json — Christian Benseler, May 09 '18 at 10:10
I just need to change the Next & Previous icons in the datepicker https://valor-software.com/ngx-bootstrap/#/datepicker — Krishna, May 17 '18 at 05:57
@Krishna I don't have enough knowledge about it. I dont think I can help much, But reading your error your can try this: `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.` Have you seen this line in the error, try and configure your `tsconfig` file — BeeBee8, May 27 '18 at 16:31
I think , If your node modules are not in node_modules directory then you have to specify new path also in tsconfig file — BeeBee8, May 28 '18 at 02:23
ngx-bootstrap-base is inside node_modules folder. But the folders are different when I use npm install ngx-bootstrap --save and npm install https://github.com/krishnag9/ngx-bootstrap --save-dev — Krishna, May 28 '18 at 05:34

score 1 · Answer 1 · answered May 19 '18 at 16:44

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 =>

answered May 19 '18 at 16:44

BeeBee8

2,944
1
27
39

Working but If I click the next or previous button to change the month the icon is changing back again – Krishna May 20 '18 at 05:56
@Krishna Ohh, ok, I will try to find another work around – BeeBee8 May 20 '18 at 06:10
Sure @Bhushan. Thanku – Krishna May 21 '18 at 06:32
After building the application, a files is generated with name vendor.bundle.js Can I changed in that file? – Krishna May 22 '18 at 17:02
@Krishna , No you should not do that. It's not feasible to change it every time you make a build. – BeeBee8 May 22 '18 at 17:21
Okay. Is there anyway then? I need to add TODAY & TOMORROW options also in datepicker. Can I place the folder outside of node_modules and link that to my application – Krishna May 22 '18 at 17:40
Read this and try searching for " how to edit npm packages" https://stackoverflow.com/questions/13300137/how-to-edit-a-node-module-installed-via-npm. – BeeBee8 May 22 '18 at 17:50
I have tried the above steps. Please check my edited question. – Krishna May 26 '18 at 19:26
@Krishna ok. I will have a look tomorrow. – BeeBee8 May 26 '18 at 19:29
Any other solution to change that `next` and `previous` icons – Krishna May 30 '18 at 09:08

score 1 · Answer 2 · answered Aug 21 '21 at 09:58

1

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

answered Aug 21 '21 at 09:58

Stefan Majiros

444
7
11

score -1 · Answer 3 · answered May 08 '18 at 18:58

-1

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.

answered May 08 '18 at 18:58

Joshua Chan

1,797
8
16

Not using webpack loader. I mean there is no file like webpack.config.js – Krishna May 09 '18 at 05:25

Changes made in files under node_modules

3 Answers3

Linked