{"id":27880582,"url":"https://github.com/sitelint/angular-static-assets-hash","last_synced_at":"2026-01-17T05:40:48.902Z","repository":{"id":196109436,"uuid":"694600088","full_name":"sitelint/angular-static-assets-hash","owner":"sitelint","description":"Create a list of Angular static assets and a hash for each file.","archived":false,"fork":false,"pushed_at":"2025-05-01T15:16:53.000Z","size":85,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-29T14:02:26.632Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sitelint.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-09-21T10:18:17.000Z","updated_at":"2025-05-03T01:13:16.000Z","dependencies_parsed_at":"2024-06-04T12:30:13.368Z","dependency_job_id":"fa049011-b69b-4c7c-adcb-fc3b212dbc5b","html_url":"https://github.com/sitelint/angular-static-assets-hash","commit_stats":null,"previous_names":["sitelint/angular-static-assets-hash"],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/sitelint/angular-static-assets-hash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitelint%2Fangular-static-assets-hash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitelint%2Fangular-static-assets-hash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitelint%2Fangular-static-assets-hash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitelint%2Fangular-static-assets-hash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sitelint","download_url":"https://codeload.github.com/sitelint/angular-static-assets-hash/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitelint%2Fangular-static-assets-hash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28500722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T04:31:57.058Z","status":"ssl_error","status_checked_at":"2026-01-17T04:31:45.816Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-05T04:02:26.065Z","updated_at":"2026-01-17T05:40:48.883Z","avatar_url":"https://github.com/sitelint.png","language":"JavaScript","readme":"# Angular and create a list of static assets with their hashes\n\nCache busting static files (images, pdfs, pngs, etc.) for the Angular application.\n\nWhen building, Angular will add a hash to JavaScript, CSS, and assets referenced in your CSS files. However, what about images and other assets you have in your assets folder that you reference in templates?\n\nThose assets are not hashed.\n\nThe package looks for static assets, creates a list of them with their hashes, and saves it as a JSON file. This is useful when you want to change the same static asset without changing the name and ensure that the browser will always fetch the latest version.\n\nNote that the hash is created the same way as for Subresource Integrity (SRI).\n\n## Getting started\n\n### Install\n\n```bash\nnpm install @sitelintcode/angular-static-assets-hash --save--dev\n```\n\n### CLI\n\nYou can use directly in `package.json` `script` or through `npx createAngularStaticHashes` [params].\n\n#### Parameters\n\n- `--staticAssetsPath=[path to static assets]`. Default: `[angular root folder]/assets/images`\n- `--globPattern=[glob pattern]`. Default: `/**/*`\n\n### Import\n\n```JavaScript\nimport { createHashes } from '@sitelintcode/angular-static-assets-hash';\n\nconst angularStaticAssetsHash = new AngularStaticAssetsHash();\n\nangularStaticAssetsHash.createHashes();\n```\n\n## Example output\n\n```JSON\n{\n  \"assets/images/example.png\": \"iY5RY0G8wePLPRkZSTgW2XYZFZ7kQOqXoJTFpQFG5nI\",\n  \"assets/images/avatar.svg\": \"7A7qFs_iOghsdUtLG-7y-5cxT3FC8S_BRXl5ldsNY7Y\",\n  \"assets/images/body-background.svg\": \"K2FTBtDsxgKLQFr4BUW1ptnLWqPCKPyGypHCBTfcctQ\",\n  \"assets/images/icons.svg\": \"Ka-ngr7Fht6ucmN03kzJeMN7f2iOtnkD-D63QJ01jhM\"\n}\n```\n\n## Angular\n\nOnce the list of static assets is created, we need to have a way to use it with Angular. For that purpose, we can use an [Angular Pipe](https://angular.io/api/core/Pipe).\n\n### Notes\n\n1. Notice the `staticAssetsList` private property. It points to the location of `assets.json` file is created.\n2. The default path for static assets is `[angular root path]/assets/images`.\n\n### TypeScript Pipe for Angular\n\n```TypeScript\nimport { Pipe, PipeTransform } from '@angular/core';\n\nimport staticAssetsList from '../../assets.json';\n\n@Pipe({\n  name: 'fileHash'\n})\nexport class FileHashPipe implements PipeTransform {\n\n  private staticAssets: { [key: string]: string };\n\n  constructor() {\n    this.staticAssets = staticAssetsList;\n  }\n\n  private addParamsToUrl(givenUrl: string, urlParameters: string): string {\n\n    if (typeof urlParameters !== 'string' || urlParameters.length === 0) {\n      return givenUrl;\n    }\n\n    const urlSplitByHash: string[] = givenUrl.split('#');\n    const hash: string = urlSplitByHash[1] || '';\n    const params: string[] = urlParameters.split('\u0026');\n    let url: string = urlSplitByHash[0];\n\n    if (url.indexOf('?') === -1) {\n      url += '?';\n    } else {\n      url += '\u0026';\n    }\n\n    url += params.map((paramItem: string): string =\u003e {\n      const p: string[] = paramItem.split('=');\n\n      return `${p[0]}=${window.encodeURIComponent(p[1])}`;\n    })\n      .join('\u0026');\n\n    url = url.slice(0, -1); // remove last \u0026\n\n    return hash ? `${url}#${hash}` : url;\n  }\n\n  private getHashForStaticAsset(assetPath: string): string {\n    const path: string = assetPath.split('#')[0];\n\n    if (typeof this.staticAssets[path] === 'string') {\n      return this.addParamsToUrl(assetPath, `c=${this.staticAssets[path]}`);\n    }\n\n    return '';\n  }\n\n  public transform(filePath: string): string {\n    const filePathWithCacheHash: string = this.getHashForStaticAsset(filePath);\n\n    return filePathWithCacheHash;\n  }\n}\n```\n\nLater in the code the pipe can be used in the following way.\n\n### Image example\n\n```HTML\n\u003cimg attr.src=\"{{ 'assets/images/example.png' | fileHash }}\" alt=\"\"\u003e\n```\n\nThe hash is quite useful when we want to manage, e.g., one file with all `\u003csvg\u003e` icons. While you could change your single file with all svg icons all the time, your code remains the same.\n\n### SVG sprite example\n\n```HTML\n\u003csvg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 48 48\" width=\"32\" height=\"32\"\u003e\n  \u003cuse attr.href=\"{{ 'assets/images/icons.svg#image-logo' | fileHash }}\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\n## Workable example\n\nYou can see the implementation by looking at the source code of the [app based on Angular](https://platform.sitelint.com/).\nThe app refers to [SiteLint Audit Platform](https://www.sitelint.com/platform/).\n\n## Contributing\n\nContributions are welcome, and greatly appreciated! Contributing doesn't just mean submitting pull requests. There are many different ways for you to get involved, including answering questions on the issues, reporting or triaging bugs, and participating in the features evolution process.\n\n## License\n\nMOZILLA PUBLIC LICENSE, VERSION 2.0\n","funding_links":[],"categories":["Angular","Recently Updated"],"sub_categories":["Builders","[May 03, 2025](/content/2025/05/03/README.md)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsitelint%2Fangular-static-assets-hash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsitelint%2Fangular-static-assets-hash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsitelint%2Fangular-static-assets-hash/lists"}