Customising APP_BASE_HREF results in [inlineSVG] not working anymore
Hello,
when customizing the angular variable in the app.module.ts like that:
{
provide: APP_BASE_HREF,
useValue: '/test'
}
an error occours when using the [inlineSVG]:
<span [inlineSVG]="'./assets/media/icons/duotune/general/gen019.svg'"
class="svg-icon svg-icon-2" ></span>
The error is as follows:
GET https://localhost:7229/test./assets/media/icons/duotune/general/gen019.svg 404
The error is caused because the inlineSVG chooses the APP_BASE_HREF instead of the build/run url, which didn't change just because the APP_BASE_HREF changed, so the url should be:
https://localhost:7229/assets/media/icons/duotune/general/gen019.svg
The expected behaviour would be, that it ignores the changes to APP_BASE_HREF, like e.g. an image src does. Following code does work:
<img src="'assets/media/icons/duotune/general/gen019.svg'" >
Does anyone have an idea, why this happens?
Or what to do to make it work? :D
Thanks in advance!
Replies (2)
Hi Sindia Hoeller,
Thank you for sharing a great solution. Hope this can help others as well in the future. 
Thanks
Okay, problem solved, in case this can help someone, here is the solution for it in my case:
[InlineSVG] is a part of this library:
https://www.npmjs.com/package/ng-inline-svg
I added a custom config for it (this is described on the npm page aswell):
adding this to app.module.ts (to the providers):
import {SVGConfig} from "./utils/InlineSVGConfig";
{ provide: InlineSVGConfig, useClass: SVGConfig }And creating a new config:
import { Injectable, Inject } from "@angular/core";
import { InlineSVGConfig } from "ng-inline-svg-2";
@Injectable()
export class SVGConfig extends InlineSVGConfig {
constructor() {
super();
this.baseUrl = window.location.origin + "/";
}
}This fixed it for me
