Angular 7 prod build i18n files not found

Question

I am trying to deploy an Angular 7 app that uses ngx-translate and translated language files in the /dist/assets folder. I specified the correct base href in build. After deployment, I see everything loads, except the languages file which returns an error code 404 (not found).

Ive tried changing the angular.json file a few different ways. I tried changing the TranslateHttpLoader. Nothing seems to be working. I can see the i18n folder with all the language files in the /dist folder. However its not being referenced.

in app.module.ts

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

in angular.json

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

But i end up getting this error in the browser:

/assets/i18n/en.json 404 not found

Any help would be appreciated!

score 11 · Answer 1 · answered Mar 01 '20 at 15:53

11

On Angular 9.0.4 I faced the same issue.

Only when I had a dot slash prefix in the path as ./assets/i18n/ would the issue be resolved:

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

answered Mar 01 '20 at 15:53

Stephane

11,836
25
112
175

TranslateHttpLoader's default prefix is '/assets/i18n/', making this a required step when using a different baseHref. https://github.com/ngx-translate/http-loader#usage – Carsten Sep 09 '21 at 12:18

score 4 · Answer 2 · answered Sep 26 '20 at 09:46

I faced the same issue like you, In my case it worked PERFECTLY fine in my local IIS server, but it throws 404 for the live IIS server (i18n/en.json not found 404).

I went round and round, thinking it is a angular i18n path error. In the end it's boils down to a server problem.

by default IIS server will allows only few file extensions type. You have to manually add mimeType for json file (From a web config file).

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

I added this to a web config file (If file isn't there you have to create it in website root folder).

ur welcome...

Helped me too, was using the azure web app, tried every other option. Only this worked for me. — Alex, Jan 08 '21 at 17:33

score 3 · Answer 3 · answered May 23 '19 at 02:58

3

Have you imported into the 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 { }

answered May 23 '19 at 02:58

Tan Nguyen

164
1
3

Thanks for the response. Yes, I had imported into the AppModule. Just like you have shown in your snippet. Still not working. – npabs18 May 24 '19 at 03:18
Make sure your assets folder is at this level: _/src/assets/_ Are you use angular-cli ? – Tan Nguyen May 24 '19 at 03:42
Yes i am using the Angular-CLI. When i run ng build --prod, the dist folder creates the build with the assets folder at /dist//assets. Am i not supposed to deploy the app structure this way? The app before i build has the assets folder located in /src/assets like you mentioned – npabs18 May 24 '19 at 14:50

score 3 · Accepted Answer · edited Sep 26 '19 at 14:40

3

I faced the same issue like you, I believe that it is related to this command:

ng build --prod

Try to use this command:

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

For example if your deployed application name is: stackoverflow the command should be like this:

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

And here you will have the correct path to your i18n json files

edited Sep 26 '19 at 14:40

Nikaido

4,443
5
30
47

answered Sep 26 '19 at 13:03

Ramzi Guetiti

122
5

score 0 · Answer 5 · answered Sep 30 '19 at 12:36

Here is the path I went to solve a similar problem:

Check if the files with 404 error were in dist folder correct path, if not, confirm if all assets parameters are ok in angular.json.
Verify base-ref parameter as:
- https://stackoverflow.com/a/53236676/5419823
- What's the difference between --base-href and --deploy-url parameters of angular-cli tool
And look if you have a correct value in i18n parameter of environment.prod.ts (or environment.ts, etc.)

score 0 · Answer 6 · answered May 05 '23 at 19:08

This is an old thread but still an issue deploying even Angular 15 to an Azure App Service running IIS. Referencing any json config file (like those in i18n) or a woff/woff2 font will 404 by default. Redirects and refreshes on any child routes will also fail. You should include web.config at the root of the Angular project. The below web.config seems to work well for json, woff, woff2, and redirects -

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      </staticContent>
    <rewrite>
      <rules>
        <rule name="redirect_all_requests" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false"/>
          </conditions>
          <action type="Rewrite" url="index.html" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Hope this helps someone.

Angular 7 prod build i18n files not found

6 Answers6