3
votes

Fichiers angulaires 7 prod build i18n introuvables

J'essaie de déployer une application Angular 7 qui utilise ngx-translate et des fichiers de langue traduits dans le dossier / dist / assets. J'ai spécifié le href de base correct dans la construction. Après le déploiement, je vois que tout se charge, sauf le fichier de langues qui renvoie un code d'erreur 404 (introuvable).

J'ai essayé de modifier le fichier angular.json de différentes manières. J'ai essayé de changer le TranslateHttpLoader. Rien ne semble fonctionner. Je peux voir le dossier i18n avec tous les fichiers de langue dans le dossier / dist. Cependant, il n'est pas référencé.

dans app.module.ts

"assets": [
  "src/favicon.ico",
  "src/assets"
],

dans angular.json

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

Mais je finis par avoir cette erreur dans le navigateur:

/assets/i18n/en.json 404 introuvable

Toute aide serait appréciée!

angular7 ngx-translate ng-build

0 commentaires

5 Réponses :

1
votes

Avez-vous importé dans l'AppModule?

export function HttpLoaderFactory(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

3 commentaires

Merci pour la réponse. Oui, j'avais importé dans l'AppModule. Tout comme vous l'avez montré dans votre extrait. Ne fonctionne toujours pas.

Assurez-vous que votre dossier de ressources est à ce niveau: / src / assets / Utilisez-vous angular-cli?

Oui, j'utilise Angular-CLI. Quand j'exécute ng build --prod, le dossier dist crée la construction avec le dossier assets dans / dist / / assets. Ne suis-je pas censé déployer la structure de l'application de cette façon? L'application avant la construction a le dossier assets situé dans / src / assets comme vous l'avez mentionné

2
votes

J'ai rencontré le même problème que vous, je crois que c'est lié à cette commande:

ng build --base-href=/stackoverflow/ --prod

Essayez d'utiliser cette commande:

ng build --base-href=/deployed_app_name/ --prod

Par exemple, si le nom de votre application déployée est: stackoverflow la commande devrait être comme ceci:

ng build --prod

Et ici vous aurez le chemin correct vers vos fichiers json i18n

0 commentaires

0
votes

Voici le chemin que j'ai emprunté pour résoudre un problème similaire:

Vérifiez si les fichiers avec l'erreur 404 se trouvaient dans le chemin d'accès correct du dossier dist, sinon, confirmez si tous les paramètres des ressources sont corrects dans angular.json.
Vérifiez le paramètre base-ref comme:
- https://stackoverflow.com/a/53236676/5419823
- Quelle est la différence entre - -base-href et --deploy-url paramètres de l'outil angular-cli
Et regardez si vous avez une valeur correcte dans le paramètre i18n de environment.prod.ts (ou environment.ts, etc.)

0 commentaires

4
votes

Sur Angular 9.0.4 , j'ai rencontré le même problème.

Uniquement quand j'avais un préfixe de barre oblique dans le chemin comme le ferait ./assets/i18n/ le problème soit résolu:

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/');
}

0 commentaires

1
votes

J'ai été confronté au même problème que vous, Dans mon cas, cela a parfaitement fonctionné sur mon serveur IIS local, mais il jette 404 pour le serveur IIS en direct (i18n / en.json non trouvé 404).

J'ai fait le tour, pensant que c'était une erreur de chemin angulaire i18n . En fin de compte, cela se résume à un problème de serveur.

par défaut, le serveur IIS n'autorisera que quelques extensions de fichier de type. Vous devez ajouter manuellement mimeType pour le fichier json (à partir d'un fichier de configuration Web).

<staticContent>
  <remove fileExtension=".json"/>
  <mimeMap fileExtension=".json" mimeType="application/json"/>
</staticContent>

J'ai ajouté ceci à un fichier de configuration Web (si le fichier n'est pas là, vous devez créez-le dans le dossier racine du site Web).

Bienvenue ...

1 commentaires

Cela m'a aidé, et ça marche bien