CODEWITHSUNDEEP
angularnode-modules
CodeMan03
CodeMan03

Reputation: 226

Why are changes to Angular template in node_modules not being reflected

I am trying to update html in my node_modules folder and when I change it doesn't get updated. Is it not possible to update files within node_modules?

I have a project that imports a popup module

 import {PopupModule} from 'ng2-opd-popup';

I need to be able to change the code what exists in this folder path ( /node_modules/ng2-opd-popup/components/popup/popup.component.html)

div id="ng2-opd-popup-main"  *ngIf="visible" [ngClass]="mainClass" [ngStyle]="mainStyle">
<div class="row">
    <div style="display: inline-block;width:100%">
       <div id="ng2-opd-popup-well"  [ngStyle]="wellStyle" class="ng2-opd-popup-well ng2-opd-popup-well-sm">{{popupService.options.header}}</div>
    </div>
<div style="margin:20px;">
    <ng-content></ng-content>
    <div *ngIf="popupService.options.showButtons" style="margin-bottom:20px;margin-top:20px;float: right">           
        <div *ngIf="popupService.options.showConfirm">
        <button  id="confirmBtn" [ngClass]="confirmBtnStyle"  (click)="confirmYes()">{{popupService.options.confirmBtnContent}}</button>
        </div>
     <div *ngIf="popupService.options.showCancel">
        <button id="cancelBtn" [ngClass]="cancelBtnStyle" type="reset" (click)="confirmNo()">{{popupService.options.cancelBtnContent}}</button>
        </div>
    </div>
</div>

Lets say I want to take out the cancelbutton completely. When I change it and save it from within my project it doesn't update even though the html is changed.

Upvotes: 6

Views: 8740

Answers (2)

user663031
user663031

Reputation:

Ok I am seriously at a loss here. The package that I am trying to change is ng2-opd-popup located here. I can go into the node_modules > components > popup folder and modify the html but changes are not updated. The git location just shows a sample project and not the actually nodes module. This can only be installed and seen via NPM.

Do not change anything in node_modules. It's not your code. It's library code. It's third-party code. It's subject to being replaced/updated every time someone runs npm install, or clones your repo anew, or when the repo version updates. You have no way to even know if a particular file is used at run-time; the HTML file for a component's template probably is not. The package is a black box. Depending on how the library is packaged, the template may well have been pre-compiled in a build step run before the package was published.

In this case, for example, TS has been pre-compiled into JS, so any changes you make to TS files would have no effect whatsoever. When you say import {PopupComponent} from 'ng2-opd-popup';, you are actually importing a JS file. The HTML has been pre-compiled and in-lined into popup.component.js--this is a typical approach used when building libraries for use with Angular. Therefore, any changes you make to popup.component.html are completely ignored.

It would have been nice if the developer had had the foresight to add the feature you want--to hide the cancel button--but hey, such is life.

Since there is no such feature, then to eliminate the button, you could hide it with CSS. It might be best to do this globally in src/styles.css or src/styles.scss, at least for testing purposes: in the .css file for the component where you are using this, or in global scope:

#cancelBtn { display: none; }

If you really wanted more extensive customizations to the component, in ways that were not possible with either available options, or CSS, or possibly JS in some cases, then request them to the developer. Perhaps if they are things other users might want, they will accommodate you. Otherwise, you may end up, as a last resort, doing what is called "forking" the repository. That means making your own copy of the entire repo, which you can edit as you will, built it in the same way the original repo is built, typically with a command such as npm run build, and keep it in sync with any future changes to the original pretty easily.

Upvotes: 4

John Montgomery
John Montgomery

Reputation: 7096

I'm not sure what exactly the problem you're seeing is, changes you make should be visible. Or are you using something like webpack and it isn't automatically refreshing after you change it? Because the change detection typically doesn't look at node_modules, so it won't pick that up until you restart the server.

Regardless, you shouldn't change anything in node_modules - packages aren't meant to be modified directly. You should either try to work within the capabilities the package gives you, find a different one that does what you need, or if you're feeling ambitious fork it and modify the original code. In this case, it looks like you can use the first option - it has a showCancel option, so look at the documentation for how to set that.

Upvotes: 3

Related Questions