How to display text in Angular template from resource file (.rsx) in a ASP.NET Web application?

Question

I'm combining Angular 14 with a legacy ASP.NET Web application and we have static texts in a resource file (.rsx) in a folder outside of Angular.

I need to display those texts in a component's template (inside Angular). How can I do to achieve that?

Answer 1

I don t think there is a ready to use solution for this, think its best if you provide a dynamic/static generated json that you load in you translation module.

something that looks like this

Answer 2

As mentioned in the comment, it is likely that you need to implement an API to get the resources file's value and return it as a JSON object/dictionary.

You can refer to ResourceManager.GetResourceSet(CultureInfo, Boolean, Boolean) method to retrieve the resource values.

using System.Collections;
using System.Linq;
using System.Resources;

[HttpGet]
[Route("GetResources")]
public ActionResult GetResources(string? languageCode)
{
    var rm = new ResourceManager(typeof(NumberResources)); // Replace `NumberResources` with your Resource name

    if (String.IsNullOrEmpty(languageCode))
        languageCode = "en-US";

    ResourceSet rs = rm.GetResourceSet(CultureInfo.CreateSpecificCulture(languageCode),
                                         true, false);
    if (rs == null)
    {
        // Handle if resource file not found
        throw BadRequest("Resource not found");
    }

    var dictionary = resourceSet.Cast<DictionaryEntry>()
        .ToDictionary(r => r.Key.ToString(),
            r => r.Value.ToString());

    return Json(dictionary, JsonRequestBehavior.AllowGet);
}

For the Angular side, implement the service to call the API.

@Injectable({ providedIn: 'root' })
export class LanguageService {
  constructor (private httpClient: HttpClient) { }

  getLanguage(languageCode: string): Observable<any> {
    return this.http.get(`<API Domain>/<Controller path>/GetResources?languageCode=${languageCode}`);
  }
}

Caller

constructor (private languageService: LanguageService) { }

ngOnInit() {
  this.languageService.getLanguages(/* languageCode */)
    .subscribe({
      next: (data: any) => {
        console.log(data);
      }
    });
}