Asset hashing is not handled correctly in Universal

[drdreo]

Bug Report

What is the expected behavior?

When using output-hashing universal gets the information of the assets and can use those from the client to prevent loading the same asset twice.

What is the current behavior?

When using output-hashing it tries to access the image from the served apps folder without hashes. Therefore, it can't load the image when serving the server version. Only when the client app takes over, the images are rendered.

What modules are related to this issue?

- [x] common
- [x] express-engine

Minimal reproduction with instructions:

https://github.com/drdreo/ng-universal-hashing-demo

What is the use-case or motivation for changing an existing behavior?

This might has to do something with the universal server setup which could be more detailed for such use-cases where you have a folder structure like.

dist
    -app
          -en
               -assets
          -fr
               -assets
    -server

Environment:

@nguniversal versions
"@nguniversal/common": "^8.1.1",
"@nguniversal/express-engine": "^8.1.1",
"@nguniversal/module-map-ngfactory-loader": "^8.1.1",

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.803.14
@angular-devkit/build-angular              0.803.14
@angular-devkit/build-optimizer            0.803.14
@angular-devkit/build-webpack              0.803.14
@angular-devkit/core                       8.3.14
@angular-devkit/schematics                 8.3.14
@angular/cli                               8.3.14
@ngtools/webpack                           8.3.14
@nguniversal/common                        8.1.1
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.3.14
@schematics/update                         0.803.14
rxjs                                       6.5.3
typescript                                 3.5.3
webpack                                    4.39.2

Is there anything else we should know?

It only affects assets via css like: fonts or background images etc.

I have 3 locale apps with different output hashing settings for testing purpose:

• fr : "outputHashing": "all"
• en: "outputHashing": "bundles"
• it: "outputHashing": "none"

en & it apps can handle the background-image because the server app requests the image without a hash. But the fr version can not render the image and requests the image twice. One not hashed & one hashed as seen in the video. The sun.jpg should be the background.

[alan-agius4]

In case your client bundles use outputHashing you should set outputHashing to media option to the the server builder.

[drdreo]

Oh well, that fixed it. Worth an entry in the documentation i guess.
Although, the background image which is loaded like so: background: url(../../assets/images/sun.jpg) inside a component stylesheet
is included in the server output, but not the font src: url("./fonts/MarkPro-Bold.otf") format("opentype"); which is loade via a general stylesheet directly included in the angular.json styles:[]

How would i have to include that, so it also will be bundled for the server?

[alan-agius4]

Strictly speaking it shouldn't be included in the server output, as the server should re-use the browser assets.

Related issue: #12878

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}