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:
Does anyone have an idea, why this happens?
Or what to do to make it work? :D
Thanks in advance!
Replies (2)
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
Hi Sindia Hoeller,
Thank you for sharing a great solution. Hope this can help others as well in the future.
Thanks
