在 Angular CLI 项目中导入 SVG 文件？答案

【问题标题】：Importing an SVG File in an Angular CLI Project?在 Angular CLI 项目中导入 SVG 文件？
【发布时间】：2020-01-04 15:03:39
【问题描述】：

import circle from './circle.svg';

但是当我在这样的 Angular CLI 项目中尝试完全相同的导入时：

import logo from './logo.svg';

VSCode 显示错误：

Cannot find module './logo.svg'.ts(2307)

Angular 显示错误：

    ERROR in src/app/app.component.ts(5,18): error TS2307: Cannot find module './logo.svg'.

想法？

【问题讨论】：

在您的 StackBlitz 中，图像位于同一目录中。在您的 Angular 项目中，您是否在同一目录中有 logo.svg 文件？ Angular 报告它找不到该文件。
有一个提到 svg import to typescript stackoverflow.com/questions/44717164/…
是的logo.svg在同一个目录中。
但是，当没有从文件中导出时，导入如何工作？奇怪的。即使 stackblitz 会显示相同的错误，但它会运行。

【解决方案1】：

对我有用的是

const logo = require('./logo.svg') as string;

如果不起作用，请尝试：

const circle = require('!!raw-loader?!../assets/logo.svg') as string;

它将禁用默认文件加载器并返回文件内容。

您也可以在运行时导入文件：

  constructor(http: HttpClient) {
    http.get('/assets/logo.svg', {responseType: 'text'})
      .subscribe(svg => console.log(svg));
  }

或将其用作图像源：

<img src="logo.svg" />

请注意，您的 SVG 格式无效，因此无法立即工作。我必须将version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 添加到<svg> 标记以使其显示：

<svg viewBox="0 0 104 104" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  ...
</svg>

【讨论】：

当我登录logo 时，它会记录logo.svg，换句话说，它会记录文件的名称而不是内容。它会为您记录内容吗？
不，文件的内容。它也适用于您的 Stackblitz：const circle = require('./circle.svg'); console.log(circle);，但首先添加依赖项@types/node。
奇数 - 我在构造函数`console.log(logo);`中记录它，它记录logo.svg。
我认为你必须分享你的配置文件才能在这里解决它。
这是一个全新的应用程序。我已将所有配置设置设置为默认值。 logo.svg 文件位于 app 文件夹中。