DEV Community

Cover image for Deploying an i18n Angular app with angular-cli

Deploying an i18n Angular app with angular-cli

Philippe MARTIN on June 29, 2019

I will explain in this article how to create from scratch an internationalized (i18n) Angular app with the use of the Angular CLI and how to deploy...
Collapse
 
boban100janovski profile image
Boban Stojanovski • Edited

Hi

I started with 3 languages and all seemed ok, for a while.
But now my app has 6 and in a few months it should have 9 languages.

It's becoming unbearable to wait for all those builds to finish, it's a burden to maintain.

Any solution for this in the near future from the Angular team or maybe someone can suggest an alternative solution (ngx-translate?).

Collapse
 
guilhermeurnau profile image
Guilherme Santos

Take a look at npm-run-all

Collapse
 
boban100janovski profile image
Boban Stojanovski

Still slow and i still need to upload 9 zipped version to production in 9 different folders

Collapse
 
mintplayer profile image
MintPlayer • Edited

Hi,

I see that, to switch languages, you're using the <a href> tag. I was wondering if it's possible to use the <a [routerLink]> instead so that the app can switch languages without reloading the page.

From the angular docs I read that we actually have to build the app for each language we want to serve. I don't really like this since it would probably imply that the user cannot switch languages without reloading the page. Do you know a proper way around this?

Collapse
 
mkubdev profile image
Maxime Kubik • Edited

Hi

Nice one, but what if i want to reverse_proxy my API calls ? I mean, on the /fr/ version, my api call is translated to /fr/api/ instead of /api/, how can i handle this with nginx ?

Before i18n, my rule was :

location /api/ { 
 proxy_pass http://myapi.fr;
}
Enter fullscreen mode Exit fullscreen mode

So i get no items from my api since the basehref is added before the request

Collapse
 
santhony7 profile image
Tony Smith

I don't suppose you have an updated solution using the new CLI? i18n-file, --i18n-format, and --i18n-locale are all now deprecated. I have tried many different ways using the new --localize but none seem to really work how this used to.

Collapse
 
xxxlogiatxxx profile image
xxxLOGIATxxx

Hey! Thank you for brilliant post. Using latest Angular and first bonus sounds really good to me but it's showing me some errors so i can't build my app:

ERROR in src/app/app.component.html(24,13): Property 'localeId' is protected and only accessible within class 'AppComponent' and its subclasses.
src/app/app.component.html(26,13): Property 'localeId' is protected and only accessible within class 'AppComponent' and its subclasses.
src/app/app.component.html(26,74): Property 'localeId' is protected and only accessible within class 'AppComponent' and its subclasses.
src/app/app.component.html(12,51): Property 'localeId' is protected and only accessible within class 'AppComponent' and its subclasses.

It's ok if i change protected constructor(@Inject(LOCALE_ID) protected localeId: string) {} to public?

And it's returned me en-US, not en locale.

Collapse
 
mrreyesa profile image
MrReyesA

hey @xxxlogiatxxx
Did you found a Solution???

Collapse
 
ronnyek profile image
Weston

I think the new stuff in @angular/localize is showing promise, but still lacking in a lot of places.

I like the features of transloco, and use some of Netanel's other libraries (author of transloco), and have been very pleased.

I just wish we could h ave some "blend" of whats in i18n / @angular/localize and whats in transloco. There is benefit to having some stuff be pre-compiled (@angular/localize), but seems like it leaves quite a bit to be desired at this point.

Collapse
 
skb0110 profile image
Santosh Biswakarma

Hey Martin,

Thanks for sharing such great information. I was following the same for one of my project, But i am struggling with routing and navigation.
myproject.com/travel, /submittion, /final, so in such scenario how i would handle the base-href. I am using angular 8.
I mean how can implement like myproject.com/travel/en, /submittion/en,
/final/en

Kindly guide me.

Thanks.

Collapse
 
graemeq profile image
Graeme Q

I can't thank you enough for this. I'm using angular 9 with 5 different languages.

I couldn't for the life of me work out the Nginx config. I knew I had it wrong but I couldn't work out how to correct it. Alias's was the answer.

Thank you!

Collapse
 
wilsonyoung profile image
Wilson

Greate tutorial,
how about mix it with angular universal ?

Collapse
 
sanketmaru profile image
Sanket Maru

Thanks for step by step explanation. This really helps understanding serving multiple locales.
Is --base-href supported for angular 6 vesion ?

Collapse
 
jcarlosweb profile image
Carlos Campos

Thank you, but nothing worked for me, after two hours, in the end I used the package
github.com/ngx-translate/core
that in less than 5 minutes had everything working.