Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to handle import TranslateModule.forChild in module when moving to standalone components #1452

Open
LoganDupont opened this issue Oct 27, 2023 · 2 comments

Comments

@LoganDupont
Copy link

Hi,

I was wondering how you should handle an import of TranslateModule.forChild in your module when moving to standalone components? This was used because we only wanted to load the translations when navigating to a route path which lazy loads this module. Currently I have an NX project with multiple libs and each lib has his module and own assets folder with the translation files. The libs are used by one or multiple apps and in my app I have a project. json file which contains this in my target.build.options.assets

{
"glob": "**/*",
"input": "libs/i18n/assets",
"output": "/assets/shared/i18n"
},
{
"glob": "*",
"input": "libs/feat1/src/assets/i18n",
"output": "/assets/modules/feat1/i18n"
},

example:

import {HttpBackend} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';



function translateLoaderFactory(httpBackend: HttpBackend) {
	return new CustomMultiTranslateHttpLoader(httpBackend, ['assets/modules/feat1/i18n/', 'assets/shared/i18n/']);
}

@NgModule({
	imports: [
		TranslateModule.forChild({
			loader: {
				provide: TranslateLoader,
				useFactory: translateLoaderFactory,
				deps: [HttpBackend]
			},
			isolate: true
		})
	],
	providers: [TranslationLoaderResolver]
})
export default class Feat1Module {}

In the component which has been transformed to a standalone component I added TranslateModule to the imports of the @Component decorator.

@LoganDupont LoganDupont changed the title How to handle import TranslateModule.forChild in module when moving to standalone How to handle import TranslateModule.forChild in module when moving to standalone components Oct 27, 2023
@anatolie-darii
Copy link

anatolie-darii commented Nov 14, 2023

@LoganDupont you can do something along these lines:

  1. in main app configuration
    importProvidersFrom(TranslateModule.forRoot({...}), +other modules)
  2. In your lazy loaded routes (where you previously needed .forChild
    { path: 'somePath' component: MyStandaloneComponent, providers: [importProvidersFrom(TranslateModule.forChild({ extend: true }))] }

@zazics
Copy link

zazics commented Dec 8, 2023

Hi,
Same problem for me but @LoganDupont explanation did not solve it because each standalone components (previously a module) have to load its own translation from a separate file via lazy-loading. So, it's not possible to do it in main app config.
I tried to do it in routes definition via "providers" parameter and "importProvidersFrom" but translations are not loaded for the targeted component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants