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]:

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!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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 happy

Hi Sindia Hoeller,

Thank you for sharing a great solution. Hope this can help others as well in the future. happy

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(