3

It works fine in Stackblitz.

import circle from './circle.svg';

But when I try the exact same import in an Angular CLI project like this:

import logo from './logo.svg';

VSCode displays the error:

Cannot find module './logo.svg'.ts(2307)

And Angular displays the error:

    ERROR in src/app/app.component.ts(5,18): error TS2307: Cannot find module './logo.svg'.

Thoughts?

Ole
  • 41,793
  • 59
  • 191
  • 359
  • In your StackBlitz, you have the image in the same directory. In your angular project, do you have `logo.svg` file in the same directory? Angular is reporting that it couldn't find that file. – Nikhil Aug 31 '19 at 23:56
  • There is one mentioned svg import to typescript https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript – Talgat Saribayev Sep 01 '19 at 00:07
  • Yes `logo.svg` is in the same directory. – Ole Sep 01 '19 at 00:13
  • but, how does even the import work when there isn't export from the file ?? strange. Even stackblitz shows the same error, though it runs. – Nidhin Joseph Sep 01 '19 at 00:15

1 Answers1

3

What worked for me was 

const logo = require('./logo.svg') as string;

If it doesn't work, try:

const circle = require('!!raw-loader?!../assets/logo.svg') as string;

It will disable the default file loaders and return the file contents.

You can also import the file at runtime:

  constructor(http: HttpClient) {
    http.get('/assets/logo.svg', {responseType: 'text'})
      .subscribe(svg => console.log(svg));
  }

or use it as an image source:

<img src="logo.svg" />

Please note that your SVG won't work immediately as it has an invalid format. I had to add version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> to the <svg> tag to make it display:

<svg viewBox="0 0 104 104" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  ...
</svg>
Łukasz Nojek
  • 1,511
  • 11
  • 17
  • When I log `logo` it logs `logo.svg` in other words it logs the name of the file instead of the content. Does it log content for you? – Ole Sep 01 '19 at 00:16
  • No, the contents of the file. It also works in your Stackblitz: `const circle = require('./circle.svg'); console.log(circle);`, but first add dependency `@types/node`. – Łukasz Nojek Sep 01 '19 at 00:28
  • Odd - I log it like this in the constructor ` console.log(logo);` and it logs `logo.svg`. – Ole Sep 01 '19 at 00:33
  • I think you'll have to share your configuration files to have it solved here. – Łukasz Nojek Sep 01 '19 at 00:34
  • It's a brand new app. I have all the configuration settings set to the defaults. The `logo.svg` file is in the app folder. – Ole Sep 01 '19 at 00:35
  • I could push it to a github repository if need be. – Ole Sep 01 '19 at 00:36
  • I have added another way. It's not compile time loading of the file, but maybe that's enough for you? – Łukasz Nojek Sep 01 '19 at 00:55
  • The rawloader approach works as well. Thanks again! – Ole Sep 01 '19 at 02:39