Comments (4)
I find it incredibly hard to use it in Angular 17 without the module structure.
{
path: `${environment.seo.service}`,
loadComponent: () =>
import('../pages/seo/seo.component').then((c) => c.SeoComponent),
providers: [
importProvidersFrom([
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: () => {
return new TranslateJsonLoader();
},
},
}),
]),
],
},
Is this corrrect understood this is the new way we should implement pr lazyloading basis of a component?.
I keep getting the following error:
ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_SeoComponent])[_TranslatePipe -> _TranslatePipe -> _TranslatePipe -> _TranslatePipe]:
NullInjectorError: No provider for _TranslatePipe!
at NullInjector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:5605:27)
at R3Injector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:6048:33)
at R3Injector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:6048:33)
at R3Injector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:6048:33)
at R3Injector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:6048:33)
at ChainedInjector.get (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:15426:36)
at lookupTokenUsingModuleInjector (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:4116:39)
at getOrCreateInjectable (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:4164:12)
at Module.ɵɵdirectiveInject (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/node_modules/@angular/core/fesm2022/core.mjs:11987:19)
at NodeInjectorFactory.SeoComponent_Factory (/Users/patricksahlgren/Desktop/Handyhand/handyhand-seo/src/app/pages/seo/seo.component.ts:127:24) {
ngTempTokenPath: null,
ngTokenPath: [
'_TranslatePipe',
'_TranslatePipe',
'_TranslatePipe',
'_TranslatePipe'
]
}
TranslateJsonLoader:
import { TranslateLoader } from '@ngx-translate/core';
import { of } from 'rxjs';
import * as dk from 'assets/i18n/dk.json';
import * as en from 'assets/i18n/en.json';
import { environment } from '../environments/environment.dk';
export class TranslateJsonLoader implements TranslateLoader {
constructor() {}
public getTranslation() {
switch (environment.language) {
case 'dk':
{
return of(dk);
}
break;
case 'en':
{
return of(en);
}
break;
default:
{
return of(dk);
}
break;
}
}
}
Please help, @johnsonlin , @mtabaj :)
Running Angular v. 17. latest version of ngx-translate.
from core.
You can put it in your app routes like so:
export const routes: Routes = [
...
{
path: 'example',
loadComponent: () => import(...).then(mod => mod.ExampleComponent),
providers: [
importProvidersFrom([
TranslateModule.forChild(...)
])
]
}
...
]
from core.
I'm wondering if for small projects it makes sense to just stick with modules for now.
from core.
any updates on this? its really hard to use translate effectively with SSR and standalone components
from core.
Related Issues (20)
- bump angular 17 HOT 3
- Translation keys are ignored when dot format and nested format are mixed
- How to handle import TranslateModule.forChild in module when creating a standalone component in an NgModule Application HOT 10
- How to use ngx-translate in Angular 17, Knowing that AppModule is not implemented? HOT 3
- Support for Angular v17 HOT 30
- ngx-translate creates billions of tiny files HOT 1
- 'EventEmitter' and 'DefaultLangChangeEvent' is declared but its value is never read.
- Angular 17 SSR. Standalone implementation - NullInjectorError: No provider for _TranslatePipe! HOT 1
- I am trying to add Arabic language. I have configured package correctly but some labels are translated some are not
- Latency when loading the website, because Translation Key appears when user opens our website HOT 1
- Add opption to pass callback in translate pipe
- ncaught SyntaxError: Cannot use import statement outside a module (at scripts.js:16887:1) main.ts:13 Error: Unexpected value 'TranslateModule' imported by the module 'AppModule'. Please add an @NgModule annotation. at verifySemanticsOfNgModuleDef (core.mjs:28868:5) at core.mjs:28878:5 at Array.forEach (<anonymous>) at verifySemanticsOfNgModuleDef (core.mjs:28876:43) at AppModule.get (core.mjs:28833:23) at getInjectorDef (core.mjs:333:1) at walkProviderTree (core.mjs:5550:1) at core.mjs:5500:6 at core.mjs:4701:1 at Array.forEach (<anonymous>)
- Wrong TranslateHttpLoader after upgrade app to Angular 17
- ngx-translate not working with interceptor in Ionic Capacitor app
- Error: [$injector:unpr] Unknown provider: translateProvider <- translate
- Configuration: defaultLanguage in TranslateModule.forRoot as a Provider HOT 1
- ngx-translate.com is pointing another website HOT 3
- Ngx-translate: ..assets/i18n/ja.json: 404 Not Found after deployment HOT 1
- TranslateService.use with multiple calls causes to display the wrong language
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from core.