Question

在我的app.component.ts中，我按如下所示注册svg图标

vectorized 6.817315469961613
loopy      56.35076989419758

在我的html中，我使用如下图标：

export class AppComponent {
  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {
    this.matIconRegistry.addSvgIcon('excel',
  this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/microsoft-excel.svg'));
  }
}

CSS是：

<mat-icon class="custom-svg-icon" svgIcon="excel"></mat-icon>

该图标在开发模式下显示。但是每当我在生产环境中构建产品时，都会出现以下错误：

::ng-deep .custom-svg-icon {
  svg {
    vertical-align: top;
  }
}

找不到svg图标。但是，当我检查Failed to load resource: the server responded with a status of 404 ()目录时，在dist文件夹下找到了我的图标。

我的棱角版本是7。

请问有人可以帮忙吗？

Answer 1

这取决于您是否将资产文件夹复制到dist文件夹。

如果这样做，请验证路径。似乎文件夹不存在或路径错误。以下是要添加到webpack.config.js中以复制资产文件夹的代码。对于路径，请验证在 BUILD 中将此资产文件夹复制到的位置。

module.exports = {
 plugins: [
  new CopyWebpackPlugin([
            {from: 'src/assets', to:'assets'}
  ])
 ]
}

Answer 2

尝试将svg图标添加到angular.json（angular-cli.json）的资产文件夹中

ser = serial.Serial('COM10', 9600)

考虑将整个路径添加到资产数组，即使它具有src / assets。

SVG图标显示为dev，但不显示为生产模式

2 个答案: