Support for Angular v17 #1460
Comments
|
What do you mean |
|
Maybe this helps, this works for me, although in a small toy-level app: in your // required for AoT
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
export const appConfig: ApplicationConfig = {
providers: [provideAnimations(), provideHttpClient(),
TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}).providers!]
};Note the ! at the end (basically casts away or suppresses the potential Here is the relevant package.json "@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0"Now I can just use the pipe for example in a template. Your component needs to import the TranslateModule. |
|
I am using angular17 when trying to use the translation key with translate pip it gets back the error translate pip does not exist and this configuration |
|
Thanks, now working! |
should I update my project now to work with me? |
|
@ahmedalmorsy1993 that's a nice workaround though export const appConfig: ApplicationConfig = {
providers: [
provideRouter(appRoutes),
importProvidersFrom([
HttpClientModule,
TranslateModule.forRoot(provideTranslation())
]),
],
};where export const provideTranslation = () => ({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: TranslateLoaderFactory,
deps: [HttpBackend],
},
}); |
|
Even better, thanks! |
|
@ahmedalmorsy1993 did you manage to fix the html and how? |
Yes it's working now so this issue can be closed. |
|
@ahmedalmorsy1993 you have not imported pipe/module containing pipe in your standalone component. |
|
i updated my project to angular 17 and getting errors for translate pipe and many other. "@ngx-translate/core": "^15.0.0","angularx-qrcode": "^17.0.0", |
|
Here is how it worked for me... |
|
I get following issue:
|
This dose not solve my issue. Error thrown is:
I have also tried to exactly recode everything but I get the same error as before export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
appConfig.providers = [
provideHttpClient(),
TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
deps: [HttpClient],
useFactory: HttpLoaderFactory
}
}).providers!,
]
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
); |
|
Any news on this? |
@muhamedkarajic Did you do the import of TranslateModule in the components where you want to use the pipe? At TS: import {Component} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core'; <----- this
@Component({
selector: 'app-home',
standalone: true,
imports: [TranslateModule],
templateUrl: './home.component.html',
styleUrl: './home.component.scss'
})
export class HomeComponent {
}At HTML |
I know how to import the module in a standalone enviroment, none of what you are saying is new to me. For me from what I understood the translation module needs to be updated to angular 17 so it supports the esmodule build functionality. Thats what I'm asking for. |
|
@ocombe any news man? |
|
There is no config specific to esmodule, it works exactly like webpack for Angular code. importProvidersFrom(TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
deps: [HttpClient],
useFactory: HttpLoaderFactory
}
}))If you see an error with |
|
I'm curious guys to know if your configuration allows the translation in ts files through the TranslateService using instant keyword. I think it doesn't because of the async, it probably returns the key instead of the value. |
please share the solution i am facing same issue on ngModel. |
|
Hello, I'm facing the same issue and I've followed your instructions so far. Also I've tried to tinker around a bit, but with no luck....this is what I have so far the app.config.ts file and that's the error I get when I run ng serve I'm using Angular 17.2.1 with the latest version of ngx-translate and the components are stand alone. There is no app.module.ts or any usage of @NgModule |
|
@ocombe Will there be a provide function added in the near future so that we don't have to use |
Please remove |
|
I used this way in my own project. (TranslateYamlHttpLoader and yaml are optional, of course.) src\app\providers\translation.ts import { HttpClient, HttpClientModule } from '@angular/common/http';
import { importProvidersFrom } from '@angular/core';
import { TranslateLoader, TranslateModule, TranslateModuleConfig } from '@ngx-translate/core';
import { Observable, map } from 'rxjs';
import { parse } from 'yaml';
class TranslateYamlHttpLoader implements TranslateLoader {
constructor(
private httpClient: HttpClient,
public path: string = '/assets/i18n/',
) {}
public getTranslation(lang: string): Observable<unknown> {
return this.httpClient.get(`${this.path}${lang}.yaml`, { responseType: 'text' }).pipe(map((data) => parse(data)));
}
}
const config: TranslateModuleConfig = {
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: (httpClient: HttpClient) => new TranslateYamlHttpLoader(httpClient),
deps: [HttpClient],
},
};
export function provideTranslation() {
return importProvidersFrom([HttpClientModule, TranslateModule.forRoot(config)]);
}src\app\app.config.ts import { provideTranslation } from './providers/translation';
export const appConfig: ApplicationConfig = {
providers: [provideTranslation()],
}; |
|
app.config.ts export const provideTranslation = () => ({ export function HttpLoaderFactory(http: HttpClient) { this.translate.setDefaultLang('en'); //ngonint // HTML Code {{'login.title' | translate }}
|
|
I create a module with the command 'ng g module tranlate', there I put this code: tranlate.module.ts: import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient,HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http,'./assets/languages/','.json');
}
@NgModule({
declarations: [],
imports: [
CommonModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide:TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
exports: [
CommonModule,
HttpClientModule,
TranslateModule
]
})
export class TranlateModule { }Once this is done, I can now import the module to different components where I use the translation, for example, this is one of my components where I use the translation. information.component.ts: import { Component } from '@angular/core';
import { TranlateModule } from '../../module/tranlate/tranlate.module';
@Component({
selector: 'app-information',
standalone: true,
imports: [
TranlateModule
],
templateUrl: './information.component.html',
styleUrl: './information.component.css'
})
export class InformationComponent {
} |
|
@siloimwald thank you very much! Your approach saves me a lot of time! It's working in 17 version! |
I have updated our company application to angular v17 and unfortunately cannot get ngx-translate working.
The problem is that
ngModuleis no longer used so one has to modify theapp.config.tsfile.This is a show-stopper for us, so hopefully this can be fixed soon.
Thanks in advance for your help.
The text was updated successfully, but these errors were encountered: