为什么没有反映 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

好的，我在这里很茫然。我要更改的包是ng2-opd-popup，位于此处。我可以进入node_modules > components > popup 文件夹并修改html，但更改不会更新。 git 位置只显示一个示例项目，而不是实际的节点模块。这只能通过 NPM 安装和查看。

请勿更改 node_modules 中的任何内容。这不是你的代码。这是库代码。这是第三方代码。每次有人运行npm install，或重新克隆您的回购，或回购版本更新时，它都会被替换/更新。您甚至无法知道运行时是否使用了特定文件；组件模板的 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 都无法实现的方式，请向开发人员提出请求。也许如果它们是其他用户可能想要的东西，它们会满足您的需求。否则，作为最后的手段，您最终可能会做所谓的“分叉”存储库。这意味着制作您自己的整个 repo 的副本，您可以随意编辑它，以与构建原始 repo 相同的方式构建它，通常使用诸如npm run build 之类的命令，并使其与任何未来的更改保持同步到原来的很容易。

Answer 2

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

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