With Angular i18n the different directories for the language build need to be supported. This article shows how to support language-independent deep linking.

In some use cases, it is necessary to provide deep links in an Angular application. Without support for multiple languages, it is simply the URL + the angular route. With Angular i18n the different directories for the language build need to be supported. This article shows how to support language-independent deep linking. The  AngularAndSpring project will serve as an example. It is a Spring Boot application that provides the backend with the rest endpoints and serves the Angular frontend in the ‘resources/static/’ directory.

Frontend

The frontend contains these file and directories:

  • ‘resources/static/index.html’ -> push the user to the frontend matching their browser language
  • ‘resources/static/en/’ -> English Angular compiled frontend package
  • ‘resources/static/de/’ -> german Angular compiled frontend package

The Angular application supports; for example, this route: ‘/details/bsdetail/btcusd’. To access it, the request ‘https://somedomain.de/details/bsdetail/btcusd’ needs to be forwarded to the matching ‘index.html’ of the Angular package. For example, ‘https://somedomain.de/en/index.html’.

#spring boot #angular #i18n #deep linking

Deep Links With Angular Routing and i18n in Prod Mode
1.75 GEEK