CODEWITHSUNDEEP
angular7ngx-translateng-build
npabs18
npabs18

Reputation: 167

Angular 7 prod build i18n files not found

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!

Upvotes: 7

Views: 11383

Answers (6)

tpankake
tpankake

Reputation: 366

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.

Upvotes: 0

gamal
gamal

Reputation: 1665

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...

Upvotes: 4

Stephane
Stephane

Reputation: 12790

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/');
}

Upvotes: 12

Rubens Ferreira
Rubens Ferreira

Reputation: 33

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

  1. 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.
  2. Verify base-ref parameter as:
  3. And look if you have a correct value in i18n parameter of environment.prod.ts (or environment.ts, etc.)

Upvotes: 0

Ramzi Guetiti
Ramzi Guetiti

Reputation: 132

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

Upvotes: 3

Tan Nguyen
Tan Nguyen

Reputation: 164

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 { }

Upvotes: 3

Related Questions