0

I have a string coming from the server formatted like this:

"Lorem ipsum, <b>#LOGO# dolor</b> sit amet #LOGO# consectetur adipisicing elit #LOGO#."

I have to swap the #LOGO# substrings with an .svg in my assets folder.

I can't insert the component dynamically, since it's plain text. I also can't just convert the svg to a string constant, because it's used elsewhere as an <img> source. I can't import the .svg file since it's not a module:

import * as Icon from '@src/assets/icon.svg'

Cannot find module 'src/assets/icon.svg' or its corresponding type declarations.

I tried to add a 'gloabl.d.ts' or 'custom.d.ts' file to the project. VSCode stopped showing the error, but Angular didn't compile, showing the same error. Tried require'ing the file, but it's Angular, it doesn't allow that

The only approach that did work is to create a pipe that repalces the #LOGO# and pass the end result to the innerHtml attribute. But it just feels.. wrong

export class FormatPremRubPipe implements PipeTransform {
  transform(source: string): string {
    return source.replace(
      '#LOGO#',
      `<img src="/assets/logo.svg" />`
    );
  }
}

So what are my options?

Welnyr
  • 11
  • 2
  • Can you show some example code? From where the error is originating? This is crucial to get a clear "picture" . Whenever feasible include the code you are having questions about, struggle with and/or causes an error ☝ – Youp Bernoulli Aug 28 '23 at 10:51
  • Does this answer your question? [Unable to import svg files in typescript](https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript) – Matthieu Riegler Aug 28 '23 at 11:33
  • @YoupBernoulli, there isn't much to show - the import statement itself throws this error – Welnyr Aug 28 '23 at 11:54
  • @MatthieuRiegler It didn't work. Either I'm missing something or the solution doesn't work for Angular – Welnyr Aug 28 '23 at 12:11
  • You might check this answer: https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript, specifically the answer "Solution without webpack and custom.d.ts" – Brandon Taylor Aug 28 '23 at 12:21
  • @BrandonTaylor, nope, `Cannot find name 'require'. Do you need to install type definitions for node? Try npm i --save-dev...` – Welnyr Aug 28 '23 at 12:23
  • Did you try adding @types/node? What version of Angular are you using? – Brandon Taylor Aug 28 '23 at 12:34
  • @Welnyr well... later (checked the audit traill/history of the question) you added the statement that throw the error. That's just what I meant. – Youp Bernoulli Aug 29 '23 at 07:45

0 Answers0