With modified deploy-url, inlining critical css not working for downloaded roboto font

[school-coder]

🐞 With modified deploy-url, inlining critical css not working for downloaded roboto font

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

No.

In v12 also, was not working.

Description

A clear and concise description of the problem...

🔬 Minimal Reproduction

With modified deploy-url, inlining critical css not working for downloaded roboto font

package.json

"scripts": {
    ...
    "build": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --base-href=/portal/ --deploy-url=/portal/public/ --configuration production"
    ...
}

font.css

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Light.woff2') format('woff2'),
  url('Roboto-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

angular.json
projects..architect.build:

...
"styles": [
             ...
              "src/assets/fonts/font.css",
             ...
],
...
"configurations": {
    "production": {
        ....
        "optimization": {
                        "scripts": true,
                        "styles": {
                          "minify": true,
                          "inlineCritical": true
                        }
                      }
        ....
    }
...
}

🔥 Exception or Error

the path is http://localhost:8080/portal/Roboto-Light.86fc2559ff73eac5.woff2 instead of http://localhost:8080/portal/public/Roboto-Light.86fc2559ff73eac5.woff2

🌍 Your Environment

13.0.0

[alan-agius4]

Can you please provide the values of deployUrl and baseHref options?

[school-coder]

Can you please provide the values of deployUrl and baseHref options?

@alan-agius4, Yes I have mentioned it in the description under package.json

"scripts": {
    ...
    "build": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --base-href=/portal/ --deploy-url=/portal/public/ --configuration production"
    ...
}

Observation here is, when I set inlineCritical to false, the URL of the font files are resolved correctly. But when I set this to true, font files are not loading due to incorrect URL.

[alan-agius4]

Hi @school-coder,

I managed to replicate this. However, it's important to point out the deployUrl is deprecated and will be removed in a future version of the Angular CLI.

Since this is not a regression I am inclined to say that we shouldn't be fixing deprecated behaviour unless it's a regression especially considering that this issue is not a problem when migrate to the recommended alternative for deployUrl.

[school-coder]

@alan-agius4 : I am still not clear why deployUrl is been deprecated.

In my case, static assets needs to be load from /portal/public/<asset_path> where as routing or http request needs to fire with base-href which is /portal/.

In our case, we are doing white-listing the security for the path having public in it as it has only static assets.

What would be your recommendation in this case?

Note: I am also following the issue #22113 on the same usecase

[alan-agius4]

@school-coder, You don't need deployUrl to achieve the above.

You can set the baseHref to /portal/public/ and APP_BASE_HREF to /portal/.

More info about the deprecation can be found here: #21537.

[school-coder]

@alan-agius4, baseHref and APP_BASE_HREF does the same job right?

I tried the steps you have followed which resulted in,

<base href="/portal/public/">
....
<script src="runtime.24065062ffd17f11.js" type="module"></script>

generated in index.html. The scripts are resolving whereas http requests are misleading

For example,

Expected:

http://localhost:8080/portal/rest/v1/themes/styles

But the request triggered as,

http://localhost:8080/portal/public/rest/v1/themes/styles