-1

In Angular 4 I've used Webpack's (or even File-loader's) require method to get Image hash name:

const versionedName = require('assets/images/icn-copy.svg');

It returns something like "assets/images/icn-copy.435435fj5435f345345f435f435f345f.svg" - hashed file name. And I could use it for request to server. But after migration to Angular 6 require function started returning object with property "default" that contains not hashed name.

How can I get hashed name in Angular 6 and later?

Update: I've noticed that images after migration are not hashed at all now. It may be the reason. For example 

.loader {
    background-image: url('assets/images/spinner.svg');
...
}

results in just spinner.svg in the root instead of spinner.214312fe21fe412f4ef.svg

Update 2: As the issue is solved now, I would appreciate to hear about better way to bypass caching for images though. require() is definitely not the best way. It is not about images from assets. It is about requested ones. For example:

this.http.get('assets/images/spinner.svg') // will be cached
this.http.get('assets/images/spinner.214312fe21fe412f4ef.svg') // will NOT be cached.
Alex Vovchuk
  • 2,828
  • 4
  • 19
  • 40
  • That is not what you use the assets folder for. Those files are not part of the WebPack bundle, and you're just forcing WebPack to include them. The asset folder is for files you want to be accessible from the web server as static files. – Reactgular Dec 10 '19 at 16:27
  • @Reactgular I don't include them to assets folder at all. I just need the unique name to prevent caching when fetch an icon. And it worked fine in Angular 4/5 – Alex Vovchuk Dec 10 '19 at 16:30
  • @Reactgular do you have any other idea? Share please. And I'm still don't get the complete understandion of that file-loader's require(). It is completely another require that CommonJS one, as it returns hashed file name, but not entire file. If you think it is a bad idea, what is this require() used for instead? – Alex Vovchuk Dec 10 '19 at 16:37

1 Answers1

0

The issue was that starting from Angular 6 the hashing is disabled by default. Adding flag --output-hashing=all solved the issue. It is good to mention, that In Typescript 2.7 now allowed default imports to CommonJS/AMD/UMD (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#support-for-import-d-from-cjs-from-commonjs-modules-with---esmoduleinterop). It means that require() now returns not string with full file name but object with property default containing this string. Instead of

icn-copy.435435fj5435f345345f435f435f345f.svg

now:

{
    default: "icn-copy.435435fj5435f345345f435f435f345f.svg"
}

But I still need better solution! (look update 2)

Alex Vovchuk
  • 2,828
  • 4
  • 19
  • 40