Angular 编译/构建期间的内联 SVG答案

【问题标题】：Inline SVG during Angular compile/build timeAngular 编译/构建期间的内联 SVG
【发布时间】：2019-12-02 23:38:14
【问题描述】：

我们有一个 Angular 应用程序 (SSR)，我需要在构建期间内联一些 SVG 图标。这主要是为了减少对我们节点服务器的命中。

我们使用 angular-svg-icon 在运行时内联 SVG。我查看了ng-inline-svg，它也在运行时运行。

我不想手动将它们添加到 HTML 中以免污染代码。有没有办法在编译/构建期间执行此操作？

【问题讨论】：

您始终可以使用 ngIf 并拥有类似 this.browser = isPlatformBrowser(this.platformId);在您的组件构造函数中。
@Bartando 我不确定这会有什么帮助，请您解释一下吗？我需要实现的是在构建期间将 SVG 内联到 HTML 中，以便我保存用于检索 SVG 的服务器调用。
你读过ng-inline-svg的readme的这一部分吗？你用什么做 SSR？
@joaoBeno 是的，我确实读过这部分。它表明 SVG 可以在接收到请求后发生在服务器端呈现。我需要的是在构建/编译期间替换/注入 SVG。

标签： angular svg server-side-rendering

【解决方案1】：

据我所知，您需要创建一种自定义方法来解析您的模板以获取 SVG 提及，然后使用注入的文件创建一个中间 html，构建器将使用它来生成最终产品。

我认为您可以创建一个像“svg_aggregator.js”这样的小 js，并创建一个在 ng 构建之前运行它的自定义命令...在其中，您将打开您的 .html 模板，扫描它是否有 svg 提及，拥有后，您将文件复制到 tmp（如“home-component.tmp.html”），然后生成一个新的“home-component.html”，并注入 svg。然后 ng 构建运行，然后，在构建之后，运行另一个脚本（或相同的，带有参数）以将您的模型恢复到它们的旧状态。

【讨论】：

实际上，我现在正在做类似的事情。我想确保没有人有更好的方法。感谢您的建议。
嗨 +Osama 您是否设法在构建时创建了内联 svg 的内容？
@Kamil 很想看看您对此的看法，或许可以起草您自己的答案？
嗨！我制作了@kmaraz/replace-svg-in-html-loader，你可以在 NPM 上找到。随时提出问题或直接给我发电子邮件。

【解决方案2】：

我制作了@kmaraz/replace-svg-in-html-loader Webpack loader 来解决这个问题。它以 NPM 包的形式发布，因此请随时试用。

对于安装过程，您可以按照存储库中提供的自述文件：https://www.npmjs.com/package/@kmaraz/replace-svg-in-html-loader#getting-started

如果您有任何问题/疑问，请随时直接给我发电子邮件或提出问题。

【讨论】：

【解决方案3】：

我使用 rawloader 解决了这个问题。在此处查看示例 ==>

// Declare my SVG here
import mySVG from '!!raw-loader!../../../assets/my-svg-file.svg';

// Use it then to assign this 
svgElement.innerHTML = mySVG ;

【讨论】：