使用 Angular2+ InMemoryWebAPI 时无法加载 SVG 图标答案

【问题标题】：SVG icons cannot be loaded when using Angular2+ InMemoryWebAPI使用 Angular2+ InMemoryWebAPI 时无法加载 SVG 图标
【发布时间】：2019-01-03 13:22:52
【问题描述】：

配置 InMemoryWebAPI 时，SVG 图标无法加载使用

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, {dataEncapsulation: false}),
    NoopAnimationsModule,
    AppRoutingModule,
    CustomMaterialModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('~/../assets/mdi.svg'));
  }
}

我尝试使用 apiBase 参数进行配置，但没有成功。

控制台：检索图标时出错：未定义

InMemoryWebAPI 必须忽略 API URL 范围之外的其他 url。

【问题讨论】：

标签： angular icons angular-material in-memory-database

【解决方案1】：

将 passThruUnknownUrl 选项设置为 'true' 以允许未知请求通过，以便我们可以通过 URL 访问实际资产。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, {dataEncapsulation: false, passThruUnknownUrl: true}),
    NoopAnimationsModule,
    AppRoutingModule,
    CustomMaterialModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('~/../assets/mdi.svg'));
  }
}

【讨论】：