staticInjectorError[InjectionToken TranslationsFormat] when building with AOT #4
Comments
BSchuhmacher
changed the title
|
Same issue on my side, anything new about this ? |
|
Yes sorry, I will update the docs, you need to define those if you don't use the angular cli + aot: // format of translations that you use
{provide: TRANSLATIONS_FORMAT, useValue: "xlf"},
// the translations that you need to load on your own
{provide: TRANSLATIONS, useValue: XLIFF},
// locale id that you're using (default en-US)
{provide: LOCALE_ID, useValue: "fr"},
// optional, defines how error will be handled
{provide: MISSING_TRANSLATION_STRATEGY, useValue: MissingTranslationStrategy.Error}Those are the exact same options that you need to define for angular i18n, see the docs on angular.io: https://angular.io/guide/i18n#merge-with-the-jit-compiler |
|
I use ng cli (tested with 1.5.0 and 1.6.0 version and Angular 5.0.0 and 5.1.0 version) and aot compiler, and i still have an error I tried with the i18n example from note that then I inject add the provider Does this help ? |
|
What if you add the providers (for translations, ...) to your main module as well? |
|
it's working with JIT compilation ! thanks a lot :) I'm now trying with aot my app.module.ts (for others) : |
|
It's look like doesn't work with aot : When i try to launch this code with aot i have an error solved by adding when i create an other translation and serve the project with : Project build without errors, translations from html are right ones (from source.en-GB.xlf), but translation from code are not replaced and still translated with : So how i can configure the module to be usable with aot ? |
|
Try to define "I18n" last in your list of providers |
|
You've changed the providers in the main module to use the file "source.en-GB" instead of fr ? |
|
no, I would be able to build my app in each language in if not i'll find a workaround |
|
The translations are not added to the providers by the AOT compiler yet (it will change in v6), which means that you'll need to define them in the providers of your main module... That being said, you can use |
|
Ok, I will take a look. Thanks a lot for your time and for your work. 👍 |
|
@vqoph Not sure if you got it working. If not, or maybe for the next person to find this thread looking for help, here's what finally worked for me. I'm passing in the // app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import {
NgModule,
TRANSLATIONS,
LOCALE_ID
} from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';
declare const require;
export function translationsFactory(locale: string) {
locale = locale || 'en'; // default to english if no locale
return require(`raw-loader!../locale/messages.${locale}.xlf`);
}
@NgModule({
imports: [BrowserModule]
declarations: [
AppComponent,
],
providers: [
{
provide: TRANSLATIONS,
useFactory: translationsFactory,
deps: [LOCALE_ID]
},
I18n
]
bootstrap: [AppComponent]
})
export class AppModule { }My project is structured like: To test out translations I can serve it like: |
|
This is nice! Could you improve the documentation of the project (readme) to explain all this? |
|
Thanks @jrolheiser-va for the tip and @ocombe for the work. One thing to note, as of: The compiler will no longer add empty It would be really great to be able to pass an argument to This is of course, unless I'm missing something here. |
|
could you open an issue on the angular repository for this please? |
|
@jrolheiser-va it seems that |
|
@clarkorz This has been reported to the Angular team here which also contains a solution you can use in the interim time until it is fixed. Personally I switched all of our company's projects to just use the core lib as we ran into some use cases and limitations that this polyfill lib didn't support (Mainly a good interface for loading dynamic translations) While it is possible with this polyfill library, we just found the core lib easier to use. |
Hi
I am in the progress of testing i18n-polyfill.
After setting up my ts files with the i18n-polyfill I can extract all marked parts and build the project with:
ng xi18n -of i18n/source.xlf -f xlf --locale ennode ./node_modules/@ngx-translate/i18n-polyfill/extractor/ngx-extractor -i "src/**/*.ts" -f xlf -o src/i18n/source.xlfAfter this step I inserted the "<target>...</target>" parts into src/i18n/source.xlf and saved it as src/i18n/source.en.xlf.
ng build --i18nFile src/i18n/source.en.xlf --i18nFormat xlf --locale enThe build process finished with no errors.
When opening the project with the Webbrowser I get the following error:
I tried this with a new angular project (ng new i18nTest). The changed files are the following:
app.module.ts
app.component.ts
app.component.html
As I don't have a idea where a problem on my siede could be I fear it is a problem with the polyfill.
Any Ideas?
Regards
Bernd
The text was updated successfully, but these errors were encountered: