aspnetboilerplate Angular Cli switch css for RTL languages

Question

I am working on an aspnetboilerplate Angular 4 project, I want to replace css files for RTL languages.

If it is not possible due to static pages generated by Angular Cli, please let me know how can I select a different index.html file (let's say index-ar.html) for RTL language, depending upon the current language in the below code:

        app.Use(async (context, next) =>
        {
            await next();
            if (context.Response.StatusCode == 404
                && !Path.HasExtension(context.Request.Path.Value))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        });

in the above code, it is always selecting the index.html, so I want to check the current language and want to set the path to the "index-rtl.html".

Answer 1

I was able to solve the issue by using the following code:

            if (context.Response.StatusCode == 404
                && !Path.HasExtension(context.Request.Path.Value))
            {
                string culture = "en";
                if (context.Request.Cookies.ContainsKey("Abp.Localization.CultureName"))
                {
                    culture = context.Request.Cookies["Abp.Localization.CultureName"];
                }

                if (context.Request.Path.Value == "app/ar" || culture=="ar")
                    context.Request.Path = "/ar/index.html";
                else
                    context.Request.Path = "/index.html";
                await next();
            }

I have two index files, for English, I have the file in the wwwwroot folder, while for Arabic index.html file, in the wwwwroot\ar folder. On Angular level, I set the path to "app/ar" to my home component and this solution worked perfectly.