npm 包的 Angular 2 编辑模板答案

【问题标题】：Angular 2 edit template of a npm packagenpm 包的 Angular 2 编辑模板
【发布时间】：2017-12-01 19:47:12
【问题描述】：

我发现自己处于想要/必须编辑组件模板的情况，将 npm 导入到我的 angular2 项目中的包。

我知道在 /node_modules 文件夹中编辑它是一个很大的“禁忌”。我会丢失对“npm install”的所有编辑，或者我必须将整个 /node_modules 文件夹添加到我的 GIT 项目中。

那么我应该如何应对这个挑战。

在 Java 世界中，我会扩展类、添加和/或覆盖东西，并在需要的地方使用我自己的“子”类。

但是 Angular 2 组件模板呢？...

编辑：

澄清我的评论@lexith：

如果您使用过 Angular2，您应该知道什么是组件模板。具有相同名称但扩展名为 .HTML 的文件。现在，如果我通过 npm 添加一个组件（例如：ng-bootstrap、ngx-uploader ....），并且我需要稍微编辑模板或行为（.ts 文件），应该如何解决这种问题挑战。

我可以提供代码和特定的包名称，但这有什么帮助？带着这个问题，我尝试理解这个概念并在几种情况下实现它。

EDIT2：

我发现了一个类似的问题here on SO。我想我会按照那里提出的解决方案来实施。

Fork => Edit => Push => Import（来自我的 git fork）。`

但是重新排列一些 HTML 标记真是让人头疼。这是去罗马的唯一途径吗？

【问题讨论】：

你能说得更具体点吗？什么包，什么模板，应该改什么？
不，我不能。这是一个关于特定框架的一般问题。关于如何用代码处理某种情况的问题。
也许看看那个包中的css，并覆盖你在项目中想要的那些css样式。不知道它是否有效，只是一个疯狂的猜测:)
这也是我的第一个想法，但就我而言，我需要重新排列类名并添加一些 HTML 结构标签。
正如@lexith 所说，您需要更具体。我重写了 mermaidJS 包来满足我的需求，并且我在一个可以导出到任何地方的简单 Angular 服务中完成了它。但它仅适用于 mermaidJS。所以是的，更具体一些，即使这是一个一般性问题。

标签： angular

【解决方案1】：

正如您在对问题的编辑中所说：是的，打开一个新的 git repo 只是为了进行一些更改并从那里拉出来......绝对没有多大意义。如果您的更改仅影响您当前的项目，则不会。但一般的做法基本上是正确的。我只是不会为此使用 git：

拉一次包（但不要将其保存为依赖项）进行更改并创建一个.tgz 文件。将此文件放在您的项目中的某个位置（例如node_modules_static）并在您的package.json 中引用它，如下所示：

dependencies": {
    "my-manipulated-module": "file:./node_modules_static/my-manipulated-module.tgz"
}

当然，在生产环境中，您可以/可能会将此软件包托管在您可以访问的服务器上的某个位置，在那里管理您的版本，也许可以更新/调整它，而无需每次都触及您的特定项目。

现在，有些人可能会争辩说可以更新原始模块并且更改不会反映在您的项目中，因为您使用的是自己的副本......但实际上没有办法处理自我更新无论如何，一个巨大的项目中的模块，特别是如果您对它们进行更改。

当然，如果我们只讨论 javascript 更改，您总是可以创建一个扩展，它覆盖模块的某些部分，但对于模板，我可能会这样做。

【讨论】：