I manage a multi-language website in both English (EN) and Arabic (AR). Currently, I am utilizing Bootstrap CSS from a CDN and adjusting the CDN link based on the selected language.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Seeker</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="./assets/images/icon.svg" />
<link
id="bootstrap_css"
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"
/>
</head>
<body>
<app-root></app-root>
</body>
</html>
lang.service.ts
setDir(lang = this.currentLang$.value) {
if (isPlatformBrowser(this.platformId)) {
const linkTag = document.getElementById('bootstrap_css');
if (lang === 'en') {
document.dir = 'ltr';
document.documentElement.setAttribute('lang', 'en');
linkTag?.setAttribute(
'href',
'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css'
);
} else {
document.dir = 'rtl';
document.documentElement.setAttribute('lang', 'ar');
linkTag?.setAttribute(
'href',
'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.rtl.min.css'
);
}
}
}
I am considering avoiding the use of a CDN and instead want to include the file from node_modules in angular.json dynamically based on the selected language. How can I achieve this?
angular.json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css", // for English
"node_modules/bootstrap/dist/css/bootstrap.rtl.min.css", // for Arabic
"src/styles/styles.scss"
],
If updating angular.json dynamically is not feasible, is it possible to import the file dynamically in style.scss?