0

After a lot of research, I finally decided to use Angular Internationalization (i18n).

Current routes (as you can see they are independent of the language):

const routes: Routes = [
  {
    path: '',
    canActivate: [AuthGuardService],
    loadChildren: () => import('./commercial-layout/commercial-layout.module').then(m => m.CommercialLayoutModule)
  },
  {path: 'maintenance', component: MaintenanceComponent},
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  },
  {path: '**', redirectTo: 'water', pathMatch: 'full'}
];

I have support for 2 languages right now, en and fr.
NOTE: My website was already in production and I am adding i18n now.

However, I am facing the following problem and could not find any resource to fix it:
If I manually enter "en" or "fr" after my url ends (www.myUrl.com/en OR www.myUrl.com/fr), it works fine.

However if I try to go to the default url without language (www.myUrl.com), the website crashes/does not load.

Also all the routes inside my LAZY LOADED application are not working properly as well.

Error on going to my main route: 403 Forbidden

Do I need to rewrite all my routes for the support for i18n or is there a better way?

Thanks!

Pranav Bhatia
  • 155
  • 4
  • 14
  • You need to show your routing and how your configured your webserver. And also which error your are getting – David May 05 '20 at 17:20
  • @David routes uploaded above. Angular i18n needs to specify the language used in the URL. However, what if the user tries to visit [www.myUrl.com] instead of [www.myUrl.com/lang] – Pranav Bhatia May 05 '20 at 17:32
  • 403 error is from your web server. Can you show its config (e.g. nginx vhost). You should also have 2 client bundles as a result of ng build – David May 05 '20 at 18:05
  • @David I am sorry but I do not have access to the server. However, I can say that the reason it throws a 403 error is because angular divides the whole application build in 2 folders, "en" and "fr". Now when I access the main route (without lang) it gives 403 – Pranav Bhatia May 05 '20 at 19:56
  • Yes, that's why you need to configure the web server to redirect to either /en or /fr I think – David May 05 '20 at 20:20
  • @David That's a good idea, will solve the issue partially. But angular does not allow changing the language in runtime. How will the server or FE change the language based on user's preferences? – Pranav Bhatia May 05 '20 at 20:23

0 Answers0