When it comes to incorporating right-to-left (RTL) support into a localized Angular 2+ application, particularly for languages like Hebrew and Arabic, what is considered the best approach? I have explored various tutorials, including Internationalization (i18n), but none of them seem to address this specific need. It seems logical that the html direction property (e.g. <html dir="rtl">) should be included, along with translations defined in i18n attributes, during the app's build process.
To implement i18n-dir as explained in the documentation, you can add i18n-dir dir="ltr" (where ltr represents the default direction) to the root element in the main component template (e.g. app.component.html) like this:
<div i18n-dir dir="ltr">
<!-- The rest of the content -->
</div>
After generating translation files, a corresponding trans-unit will be created with the default direction set to ltr. For languages that require right-to-left direction, simply adjust the target of the unit to rtl.
The issue at hand is that the primary index.html file, along with some other files, is not equipped to function as a template, hindering certain actions such as translation. For more details, please refer to this specific problem.
Despite this limitation, I endeavored to tackle the challenge myself:
To address this, create a translated version of your main index.html and save it within a folder named after the corresponding rtl language (fa in my situation):
src/fa/index.html:
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<title>عنوان برنامه</title>
<base href="/fa/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<noscript>برای ادامه استفاده از این برنامه لازم است JavaScript را فعال کنید.</noscript>
</body>
</html>
Note elements like lang="fa", dir="rtl", and content in native language.
In your relevant build configurations (e.g., production-fa and fa) within your angular.json file, include:
"index": "src/fa/index.html"
Success!
You can apply similar strategies for other languages (even ltrs! Due to adjustments made in index.html).
For better comprehension, I have provided pertinent build scripts in my package.json file:
"start-fa": "ng serve --configuration=fa",
"build-fa": "ng build --configuration=fa",
"build-prod-fa": "ng build --prod --configuration=production-fa",
Bonus: How about modifying the manifest.json file for potential PWA installation?
The initial step mirrors the above process. Create a translated version located at src/fa/manifest.json:
{
"dir": "rtl",
"lang": "fa",
"name": "نام بلند برنامه",
"short_name": "نام کوتاه",
"theme_color": ...
...
However, the subsequent step demands extra attention. Defining its path proved challenging for me. You may opt to substitute the original file (src/manifest.json) with this new one. This action must be completed PRIOR to initiating the build process (not afterwards by replacing dist/.../manifest.json; since @angular/service-worker necessitates knowledge of the final state during the building phase). To do so in your package.json:
"build-prod-fa": "cp src/fa/manifest.json src/manifest.json && ng build --prod --configuration=production-fa",
And remember to restore it to its default form (in my scenario where en is the default language) prior to default production builds:
"build-prod": "cp src/en/manifest.json src/manifest.json && ng build --prod",
Please note that only production builds are pivotal regarding the manifest.json. As by default, serviceWorker is exclusively enabled in these setups (refer to your angular.json file).
I am aware this workaround is far from perfect. It entails modifying source files in various locations.
It seems like in 2017, the Angular team didn't have enough resources to prioritize adding right-to-left (rtl) support for the angular-translate module (https://github.com/angular-translate/angular-translate/issues/260).
However, it's not a major issue because achieving rtl support can be easily done using native JS...
document.body.setAttribute("dir", "rtl");
In my experience, HTML5 handles rtl support quite effectively.
In my code, I have defined an interface called ColumnDef which consists of two methods: getValue that returns type C and getComponent which takes an input argument of type C. Everything is functioning properly as intended. interface ColumnDef<R, C> { ...
Incorporating and distributing CSS objects through ChakraUI presents a simple need. Given that everything is inline, it seems the main issue revolves around "& > div". However, one of the TypeScript (TS) errors highlights an unexpected flagging of ...
I attempted to switch from angular 7 back to angular 6 by executing the following npm commands: npm uninstall -g angular-cli npm cache clean npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32535c55475e53401f515e5 ...
https://i.stack.imgur.com/j5TCX.png Can you explain the importance of having two tslint.json files, one inside the src folder and one inside the project folder? What sets them apart from each other? ...
Can a union be derived from a non-literal array? I attempted the following: const tokens = { "--prefix-apple": "apple", "--prefix-orange": "orange" }; const tokenNames = Object.keys(tokens).map(token => toke ...
After creating a generated API Client with Nswag and ASP Net Core, I needed to set the base URL for the client using the following code: export const BASE_API_URL = new InjectionToken<string>( "BASE_API_URL" ); @Injectable({ providedIn ...
I recently attempted to integrate the Google Calendar API with Angular 2 in order to display upcoming events on a web application I am developing. Following the Google Calendar JavaScript quick-start tutorial, I successfully managed to set up the API, inse ...
I'm in the process of constructing an express server using typescript and Bun. Recently, I completed my register route: import express from "express"; const router = express.Router(); router.get('/registerUser',(_req:express.Reque ...
When I attempt to use sendKeys in an input textbox with Protractor, the element is located within a shadow-root and there are three separate input textboxes. ...
I am completely new to Angular and facing difficulties running an existing project on my machine. Despite conducting numerous tests and following various articles, I still cannot get the project to run. Here is the layout of my project files: I have succ ...
Struggling to incorporate an uploader within an array: I've got an array of users displayed in a table using "ng-repeat". I want to add a column with a button to upload an image for each user. Currently, I'm utilizing ng2-file-upload, but open t ...
As I delve into the world of VS 2015 Typescript projects, I find myself faced with a myriad of build options. Many times, the questions and answers on Stack Overflow mention command line options that I'm not completely familiar with, especially when i ...
App.module: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from "@angular/http"; import { BrowserAnimat ...
Is there a utility function in Deno that can stringify an Object or primitive similar to Node.js util.inspect? For instance, if I have a JSON object in Node.js and want to display its contents: > m = {k1:'v1', k2:'v2'} { k1: ' ...
Currently, I am delving into NextJS / TypeScript and have come across a type error. The component structure is as follows: interface LayoutProps { children: React.ReactNode; title: string; keywords: string; description: string; } const Lay ...
I need help with resizing the ngx-modal to cover a large area of the screen. Currently, I am trying to make it so that when something is clicked, the modal should overlay an 80% width grid on a full desktop screen. Despite my attempts at using .modal-xl an ...
I am encountering an issue with the file uploader plugin ng2-file-upload when trying to upload a PNG file using Internet Explorer 11. For some reason, the PNG files are not being added to the queue, even though all other allowed file types work perfectly f ...
I attempted to execute the command below in order to add ngx-bootstrap to my project: ng add ngx-bootstrap Unfortunately, I encountered an error message. The full CLI output is displayed below: i Using package manager: npm √ Found compatible package ver ...
While attempting to compile an angular2 application, I encountered the following issue: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/rxjs(…) systemjs.config.js (function(global) { // map tells the System loader whe ...
I am dealing with numerous models that include additional meta data, which led me to create a generic type for appending them to the models when necessary: type WithMeta<T> = T extends Meta; However, I encountered an error stating: Parsing error: &a ...