ngx-translate loading translations from custom folder returns 404 (Ionic)

Question

Following This I've set up a custom location to load translations from.
Now when I try to access my page in Ionic Lab, none of the translations are loaded and I can see in the console that I get a 404 HTTP error.

Specifically:

{headers: HttpHeaders, status: 404, statusText: "Not Found", url: 
"http://localhost:8100/lang/de.json", ...}

I can also not directly browse to this location, Ionic Lab displays a blank page saying Cannot GET /lang but I figure this is intentional.

This is my app.module.ts (without the imports):

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpModule,
    HttpClientModule,
    LoginPageModule,
    TranslateModule.forRoot({
      loader: {
           provide: TranslateLoader,
           useFactory: (createTranslateLoader),
           deps: [HttpClient]
         }
      })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Device,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthenticationProvider,
    GlobalServiceProvider
  ],
  exports: [
    TranslateModule
  ]
})
export class AppModule {}

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, "./lang/", ".json");
}

As you can see I try to load from "./lang/" which is a directory I have created in my project folder as seen in this screenshot of my Visual Studio Code Explorer:

Now, my question is this, do I need to change the way I refer to my new location? If so, how? Do I need to write my own custom loader or somehow import my /lang/ directory into my @NgModule?

Also, here's my package.json/dependencies so you know which verisons of everything I'm using.

"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/camera": "^4.3.2",
"@ionic-native/core": "4.4.0",
"@ionic-native/device": "^4.3.2",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/storage": "2.1.3",
"angular-utf8-base64": "0.0.5",
"cordova-ios": "4.5.2",
"cordova-plugin-camera": "^2.4.1",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-ionic-webview": "^1.1.15",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.1",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1"

Are you using angular-cli? In which case you need to add the "lang" folder to the apps=>assets in .angular-cli.json. — Naoe
@Angular/compiler-cli is one of the automatic/default dependencies with the ionic starter I used (Ionic Menu Starter), I haven't actively used it at all though. I read the compiler cli is used for AoT compilation. Is this what you're referring to? — Wep0n
I am asking what system you use to build / serve the angular application. If you're using angular-cli, you would typically use ng serve / ng build. If you use... say dotnet core, you would use dotnet run / dotnet build. — Naoe
I see, I am unfamiliar with ionic. But my guess is that you need to tell ionic to include the "lang" folder. You could try putting the "lang" folder under the "assets" folder, as this is usually served by default. — Naoe

Naoe Naoe · Accepted Answer · 2018-03-06T14:05:21

You need to configure your serving framework, in this case ionic, to serve the folder lang .

Or you could also put the lang folder under the assets folder, as this folder is served by default.

In angular CLI you would configure this in the .angular-cli.json like this:

  {
    "apps": [
      {
        "assets": [
          "assets",
          "favicon.ico",
          "lang"
         ]
      }
  }

ngx-translate loading translations from custom folder returns 404 (Ionic)

2 Answers