为什么 node_modules 中对 Angular 模板的更改未反映出来

Question

我正在尝试更新我的 node_modules 文件夹中的 html，但当我更改时它没有得到更新。无法更新 node_modules 内的文件吗？

我有一个导入弹出模块的项目

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

我需要能够更改此文件夹路径中存在的代码 (/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>

假设我想完全取消取消按钮。当我更改它并从我的项目中保存它时，即使 html 已更改，它也不会更新。

Answer 1

我不确定您遇到的问题到底是什么，您所做的更改应该是可见的。还是您使用的是 webpack 之类的东西，更改后它不会自动刷新？因为更改检测通常不会查看 node_modules，所以在您重新启动服务器之前它不会拾取它。

无论如何，您 不应该 更改 node_modules 中的任何内容 - 包不应该被直接修改。您应该尝试在包为您提供的功能范围内工作，找到一个不同的包来满足您的需要，或者如果您有雄心壮志，请分叉它并修改原始代码。在这种情况下，您似乎可以使用第一个选项 - 它有一个 showCancel 选项，因此请查看文档以了解如何设置它。

Answer 2

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.

不要更改 node_modules 中的任何内容。这不是你的代码。这是库代码。这是第三方代码。每次有人运行 s npm install，或重新克隆你的 repo，或当 repo 版本更新时，它都会成为 replaced/updated。您甚至无法知道某个特定文件是否在运行时间被使用；组件模板的 HTML 文件可能不是。包裹是一个黑盒子。根据库的打包方式，模板很可能在包发布之前的构建步骤运行中预编译。

例如，在这种情况下，TS 已被预编译为 JS，因此您对 TS 文件所做的任何更改都不会产生任何影响。当你说 import {PopupComponent} from 'ng2-opd-popup'; 时，你实际上是在导入一个 JS 文件。 HTML 已预编译并内嵌到 popup.component.js 中——这是构建用于 Angular 的库时使用的典型方法。因此，您对 popup.component.html 所做的任何更改都将被完全忽略。

如果开发人员有先见之明添加您想要的功能——隐藏取消按钮——那就太好了，但是，嘿，这就是生活。

既然没有这个功能，那么要去掉这个按钮，可以用CSS隐藏它。最好在 src/styles.css 或 src/styles.scss 中全局执行此操作，至少出于测试目的：在您正在使用它的组件的 .css 文件中，或在全局范围内：

#cancelBtn { display: none; }

如果您真的想要对组件进行更广泛的定制，而这些定制是可用选项或 CSS 或在某些情况下可能是 JS 无法实现的，请向开发人员提出要求。也许如果它们是其他用户可能想要的东西，他们就会满足你。否则，作为最后的手段，您可能最终会执行所谓的 "forking" 存储库。这意味着制作您自己的整个 repo 的副本，您可以随意编辑它，以与构建原始 repo 相同的方式构建它，通常使用 npm run build 之类的命令，并使其与任何同步未来很容易改变原来的。

为什么 node_modules 中对 Angular 模板的更改未反映出来

Why are changes to Angular template in node_modules not being reflected

node-modules

angular