{"id":23383149,"url":"https://github.com/fostroll/single-spa-angular-css-url","last_synced_at":"2025-10-17T04:01:47.543Z","repository":{"id":202584762,"uuid":"620472503","full_name":"fostroll/single-spa-angular-css-url","owner":"fostroll","description":"Processing CSS files with url(\u003casset path\u003e) directive in Angular applications of single-spa","archived":false,"fork":false,"pushed_at":"2023-04-03T20:52:54.000Z","size":27,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-24T07:01:21.608Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fostroll.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2023-03-28T18:48:03.000Z","updated_at":"2023-04-22T05:25:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"ccbfb0e4-2f9c-47b4-aa61-b69b5eed2b34","html_url":"https://github.com/fostroll/single-spa-angular-css-url","commit_stats":null,"previous_names":["fostroll/single-spa-angular-css-url"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fostroll/single-spa-angular-css-url","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fostroll%2Fsingle-spa-angular-css-url","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fostroll%2Fsingle-spa-angular-css-url/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fostroll%2Fsingle-spa-angular-css-url/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fostroll%2Fsingle-spa-angular-css-url/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fostroll","download_url":"https://codeload.github.com/fostroll/single-spa-angular-css-url/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fostroll%2Fsingle-spa-angular-css-url/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279280880,"owners_count":26139351,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-17T02:00:07.504Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":"2024-12-21T22:17:41.634Z","updated_at":"2025-10-17T04:01:47.527Z","avatar_url":"https://github.com/fostroll.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# single-spa-angular-css-url\n\nAlthough the handle of Angular assets in JS and HTML files is described in the\nofficial\n*[documentation](https://single-spa.js.org/docs/ecosystem-angular.html#angular-assets)*\n(***note*** that you **must** use deprecated key `deployUrl` in\n`architect.build.options` in order to implement it),\nthe task of processing CSS files that refer to assets using `url(\u003casset path\u003e)`\ndirective is not yet clarified. Or I simply couldn't find the solution.\n\nBy default, the asset references in CSS files that contain relative paths\ncontinue to point on those relative paths when they are used in the host\napplication. Obviosly, this ends up in an error, because the host application\ndoesn't contain the required assets.\n\n**The goal**: links from CSS files after compilation must contain absolute\npath to assets, including FQDN of the microfrontend that exposes the\ncorresponding assets. It should work in both production mode and development\nmode with live reload.\n\n## Solution\n\nSo far, the only way I've found to solve the problem is by writing a small\nwebpack compilation hook. Fist of all, we move all of our CSS assets to a\nspecific directory, and then we add FQDN of the microfrontend to that\ndirectory's path in the final bundle.\n\n### angular.json\n\nAdd **resourcesOutputPath** to the\n`projects[\u003cproject name\u003e].architect.build.options`. For example:\n```json\n\"resourcesOutputPath\": \"/assets/misc\",\n\"assets\": [\n  \"src/favicon.ico\",\n  \"src/assets\"\n],\n```\nIt allows all assets that are not in the `assets` paths to be moved to the\n`/assets/misc` directory.\n\n### extra-webpack.config.js\n\nYou need to add compilation hook provided in `extra-webpack.config.js` file\nin this repo (requires `webpack.compilation_plugin.js` which is also provided).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffostroll%2Fsingle-spa-angular-css-url","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffostroll%2Fsingle-spa-angular-css-url","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffostroll%2Fsingle-spa-angular-css-url/lists"}