I've spent the past few days testing out different solutions, advice, and tutorials for this issue, but unfortunately none of them have worked.
The closest suggestion I found was from this link:
However, it references "extractCss," which has been deprecated since the article was published.
As per the guide:
- The "styles.js" file should no longer appear in Inspector > Network > JS
- Clicking a button should add its CSS file in Inspector > Network > CSS
Unfortunately, neither of these scenarios is occurring at present.
app.component.ts
const head = this.document.getElementsByTagName('head')[0];
console.log(head);
let themeLink = this.document.getElementById(
'client-theme'
) as HTMLLinkElement;
if (themeLink) {
themeLink.href = styleName;
} else {
const style = this.document.createElement('link');
style.id = 'client-theme';
style.href = `${styleName}`;
head.appendChild(style);
}
}
app.component.html
<head>
</head>
<body>
<button type="button" (click)="loadStyle('client-a-style.css')">STYLE 1</button>
<button type="button" (click)="loadStyle('client-b-style.css')">STYLE 2</button>
</body>
</html>
angular.json
"styles": [
"src/styles.css",
{
"input": "src/client-a-style.css",
"bundleName": "client-a",
"inject": false
},
{
"input": "src/client-b-style.css",
"bundleName": "client-b",
"inject": false
}
This comprises the core elements of my code.
I hope that sufficiently clarifies the issue. Thank you in advance for your assistance!