Configuración de Nginx para la aplicación angular i18n

Solución:

He hecho lo mismo en iis, primero tienes que crear tu aplicación con la opción “base-href”:

 ng build --output-path=dist/fr --prod --bh /fr/
 ng build --output-path=dist/en --prod --bh /en/

y para nginx usa esta configuración

location /fr/ {
  alias /var/www/dist/fr/;
  try_files $uri$args $uri$args/ /fr/index.html;
}
location /en/ {
 alias /var/www/dist/en/;
 try_files $uri$args $uri$args/ /en/index.html;
}

y para la navegación desde / en / someroute a / fr / someroute, puede obtener la URL del enrutador actual en su componente donde tiene el selector de idioma

getCurrentRoute() {
    return this.router.url;
}

y al hacer clic en un selector de idioma se redirige a la misma ruta con el idioma seleccionado:

 <li *ngFor="let language of languages;let i=index" >
    <a  href="https://foroayuda.es/{{language.lang}}/#{{getCurrentRoute()}}"  (click)="changeLanguage(language.lang)">
        {{language.lang}}
    </a>
 </li>

cambiar el método de idioma

changeLanguage(lang: string) {
    const langs = ['en', 'fr'];
    this.languages = this.allLanguages.filter((language) => {
        return language.lang !== lang;
    });
    this.curentLanguage = this.allLanguages[langs.indexOf(lang)].name
    localStorage.setItem('Language', lang);
    if (isDevMode()) {
        location.reload(true);
    }
}

Después de construir con:

ng build --prod --base-href /fr/ --output-path dist/fr
ng build --prod --base-href /en/ --output-path dist/en

copie las compilaciones en el directorio de servidores nginx:

cp -r dist/* /usr/share/nginx/my-app

Luego encontré 2 configuraciones diferentes de NGINX que funcionan para mí:

Usando ruta raíz

server {
    root /usr/share/nginx/my-app;
    location /en/ {
        autoindex on;
        try_files $uri$args $uri$args/ /en/index.html;
    }

    location /fr/ {
        autoindex on;
        try_files $uri$args $uri$args/ /fr/index.html;
    }

    # Default to FR
    location / {
        # Autoindex is disabled here + the $uri$args/ is missing from try_files
        try_files $uri$args /fr/index.html;
    }
}

Usando alias

server {
    listen 80 default_server;
    index index.html;

    location /en/ {
        alias /usr/share/nginx/my-app/en/;
        try_files $uri$args $uri$args/ /en/index.html;
    }

    location /fr/ {
        alias /usr/share/nginx/my-app/fr/;
        try_files $uri$args $uri$args/ /fr/index.html;
    }

    # Default to FR
    location / {
        alias /usr/share/nginx/my-app/fr/;
        try_files $uri$args $uri$args/ /fr/index.html;
    }
}

Nota: En el ruta raíz solución puede eliminar el autoindex on opción, pero también tendrá que eliminar la $uri$args/ parte de la try_files o obtendrás “índice de directorio de”[directory]”Es error prohibido”.

FYI: Puede encontrar útiles esas bonitas explicaciones sobre ROOT vs ALIAS.

Versiones

Angular CLI: 6.0.7
Node: 8.11.2
Angular: 6.0.3

Angular 9 tiene una nueva opción para crear todas las versiones de idiomas a la vez. También establece el HREF base para cada versión de la aplicación agregando la configuración regional al baseHref configurado.

ng build --prod --localize

Entonces necesita copiar todas las compilaciones al directorio de servidores nginx

COPY /dist/my-app/ /usr/share/nginx/my-app/

Y configure nginx como se muestra en las respuestas anteriores.

---

---

Utiliza Nuestro Buscador