TypeError: this.customLoader.setDefaultLang is not a function.

[antonioju]

I'm starting with Alfresco ADF and configuring a simple application in Angular. After installing and importing the necessary modules, any core component I try to place in the view gives me the error TypeError: this.customLoader.setDefaultLang is not a function.

At first, the problem NullInjectorError: NullInjectorError: No provider for _TranslateService! appeared, but after using in app.config.ts

importProvidersFrom
(
TranslateModule.forRoot(
{
loader:
{
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient, Router]
},
defaultLanguage: 'en'
})
)

I

the problem is now

TypeError: this.customLoader.setDefaultLang is not a function.

[florence023]

---

@antonioju wrote:

I'm starting with Alfresco ADF and configuring a simple application in Angular. After installing and importing the necessary modules, any core component I try to place in the view gives me the error TypeError: this.customLoader.setDefaultLang is not a function. Official Website
 
At first, the problem NullInjectorError: NullInjectorError: No provider for _TranslateService! appeared, but after using in app.config.ts

importProvidersFrom
(
TranslateModule.forRoot(
{
loader:
{
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient, Router]
},
defaultLanguage: 'en'
})
)

I

the problem is now

TypeError: this.customLoader.setDefaultLang is not a function.

---

Hello,

It sounds like you’re encountering a common issue with the integration of the translation module in your Angular application. The error TypeError: this.customLoader.setDefaultLang is not a function typically occurs when there is a mismatch or misconfiguration in the translation setup.

Here are a few steps you can take to resolve this issue:

Check the TranslateLoader Implementation: Ensure that your createTranslateLoader function is correctly implemented and returns a valid TranslateLoader. It should look something like this:

export function createTranslateLoader(http: HttpClient, router: Router) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

Module Imports: Make sure that TranslateModule is imported correctly in your AppModule and any other modules where you need translation services. It should be included in the imports array:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

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

Default Language Setting: Ensure that the default language is set correctly in your application. You can set it in the AppComponent or a service that initializes on app startup:

import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    this.translate.setDefaultLang('en');
  }
}

Dependencies: Verify that all necessary dependencies are installed and up to date. Sometimes, version mismatches can cause such issues. Ensure that @ngx-translate/core and @ngx-translate/http-loader are compatible with your Angular version.
Configuration in app.config.ts: Double-check your configuration in app.config.ts to ensure there are no typos or misconfigurations.

Hope this will help you.
Best regards,
florence023