How to add reference to generated styles.[hash].css file in Angular 7

Question

I have an Angular 7 project which generates styles.[hash].css file in prod build.

I have an iframe within one of my components which loads a static html file defined within the same project (not an angular component, just plain static html).

I want to reuse styles of my project in my static html file which is loaded within the iframe. Is there a way to know the name of the styles.css file which is generated in the dist folder as an output of the prod build?

I am generating prod build using ng build --aot --prod --stats-json

This generates a stats.json file which has the file names in field assetsByChunkName.

"assetsByChunkName": {
        "runtime": "runtime.b2ebd3cc7f73d5966db1.js",
        "main": "main.9872f510320bbf1b0ad9.js",
        "polyfills": "polyfills.b2e1d6dfcc48e480634c.js",
        "styles": "styles.4bd3b6df7eaeb9129b4d.css"
    }

Is there a clean way to (may be using a plugin), to add following line in my iframe's html file like <link rel="stylesheet" href="styles.4bd3b6df7eaeb9129b4d.css"> ?

Looking for a solution that will work in both ng serve and prod build of angular-cli

Note: I want to maintain the hash in prod files for its benefits

dota2pro · Accepted Answer · 2019-05-02 21:41:49Z

1

Add "outputHashing": "none", to angular.json

this will remove 4bd3b6df7eaeb9129b4d from style.css, documentation

  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "none", // here
      "sourceMap": true,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        }
      ]
    }

answered May 2, 2019 at 21:41

dota2pro

7,9548 gold badges51 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Souvik Basu Over a year ago

I want to maintain the hash in prod files for its benefits

dota2pro Over a year ago

Just an off topic question , can i know what are the benefits of having a hashed file name ?

Souvik Basu Over a year ago

mostly caching benefits at the browser. If I haven't updated my style.css in between two releases then my user need not fetch the file again. The hash is created based on the file content and remains the same unless the file content changes. This link might provide details webpack.js.org/guides/caching

Dr. Hilarius · Accepted Answer · 2020-07-17 23:00:16Z

1

document.querySelector('link[rel=stylesheet][href^=styles][href*=css]')?.href

answered Jul 17, 2020 at 23:00

Dr. Hilarius

1,1521 gold badge14 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to add reference to generated styles.[hash].css file in Angular 7

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related