README.md needs update

[tatsujb]

The current Doc can't be understood.

How is this used? is there a point where you'll change parts of your DOM to integrate this library?

I don't see any examples relating to the DOM in the readme.

I'm in a case where I want to be able to translate a DOM tag which as text has a variable from it's component.

the variable, being... variable I functionalities that Angular i18n doesn't offer (as it only applies to static values), which, if I understand, this library is here to solve. (support for i18n for variable content)

but I see no example.

Another thing :

So you're using this library with Angular's i18n, ok, so far so good.

Is it an added layer or does it supplant some of Angular i18n's functionality?

Right now I followed your README and I end up with this for my module.ts :

import {
  MatCheckboxModule,
  MatTableModule,
  MatFormFieldModule,
  MatSortModule,
  MatInputModule,
  MatRadioModule,
  MatSelectModule, MatButtonModule, MatRippleModule
} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HttpClientModule} from '@angular/common/http';
import {OverlayContainer} from '@angular/cdk/overlay';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule, DatePipe, registerLocaleData} from '@angular/common';
import {RouterModule} from '@angular/router';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {LOCALE_ID, TRANSLATIONS, NgModule} from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';

import {BsDropdownModule , AlertModule} from 'ngx-bootstrap';
import {AngularFontAwesomeModule} from 'angular-font-awesome';
import {IonRangeSliderModule} from 'ng2-ion-range-slider';
import {DropzoneModule} from 'ngx-dropzone-wrapper';
import {DROPZONE_CONFIG} from 'ngx-dropzone-wrapper';
import {DropzoneConfigInterface} from 'ngx-dropzone-wrapper';

import {Apis} from './logged.in/content/routing/assets/api/apis';
import {ProductFilterPipe, SortByPipe} from './logged.in/content/routing/assets/pipes/table.pipes';
import {StoreService} from './logged.in/content/routing/assets/services/store.service';

import {AppComponent} from './app.component';
import {AppRouting} from './logged.in/content/routing/assets/routes/app.routing';
import {LoginComponent} from './login/login.component';
import {LoggedInComponent} from './logged.in/logged.in.component';
import {TopBarComponent} from './logged.in/top.bar/top.bar.component';
import {ContentComponent} from './logged.in/content/content.component';
import {RoutingComponent} from './logged.in/content/routing/routing.component';
import {Items} from './logged.in/content/routing/items/items.component';
import {PurchaseOrders} from './logged.in/content/routing/purchase.orders/purchase.orders.component';
import {FourOFour} from './four.o.four/four.o.four.component';
import {ReviewTable} from './logged.in/content/routing/purchase.orders/review.table/review.table.component';
import {DoubleSlider} from './logged.in/content/routing/assets/components/double.slider/double.slider.component';
import {PageSelector} from './logged.in/content/routing/assets/components/page.selector/page.selector.component';
import {FiltersComponent} from './logged.in/content/routing/purchase.orders/filters.and.actions/filters/filters.component';
import {DetailsComponent} from './logged.in/content/routing/purchase.orders/details/details.component';
import {FiltersAndActions} from './logged.in/content/routing/purchase.orders/filters.and.actions/filters.and.actions.component';
import {ActionsComponent} from './logged.in/content/routing/purchase.orders/filters.and.actions/actions/actions.component';
import {ItemTableComponent} from './logged.in/content/routing/items/item.table/item.table.component';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';

declare const require;

registerLocaleData(localeFr, 'fr-FR', localeFrExtra);
const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
  url: '/purchaseorders/import',
  maxFilesize: 5000,
  method: "POST",
  headers: {"Content-Type": "text/csv; charset=windows-1252"},
  init: function() {
    const dz = this;
    dz.on("sending", function(file, xhr, formData) {
      const _send = xhr.send;
      xhr.send = function() {
        _send.call(xhr, file);
      }
    });
  }
};

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    LoggedInComponent,
    TopBarComponent,
    ContentComponent,
    RoutingComponent,
    Items,
    PurchaseOrders,
    FourOFour,
    ReviewTable,
    DoubleSlider,
    PageSelector,
    FiltersComponent,
    DetailsComponent,
    FiltersAndActions,
    ActionsComponent,
    ProductFilterPipe,
    SortByPipe,
    ItemTableComponent
  ],
  imports: [
    AngularFontAwesomeModule,
    BrowserAnimationsModule,
    HttpClientModule,
    BrowserModule,
    AppRouting,
    CommonModule,RouterModule,
    IonRangeSliderModule,
    FormsModule,
    ReactiveFormsModule,
    AlertModule.forRoot(),
    BsDropdownModule.forRoot(),
    DropzoneModule,
    MatTableModule,
    MatFormFieldModule,
    MatInputModule,
    MatSortModule,
    MatSelectModule,
    MatCheckboxModule,
    MatRadioModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
    MatButtonModule
  ],
  exports: [],
  providers: [
    HttpClientModule,
    Apis,
    StoreService,
    OverlayContainer,
    DatePipe,
    I18n,
    {
      provide: LOCALE_ID, useValue: 'fr',
    },
    {
      provide: TRANSLATIONS,
      useFactory: (locale) => {
        locale = locale || 'fr';
        return require(`raw-loader!../locale/messages.${locale}.xlf`);
      },
      deps: [LOCALE_ID]
    },
    {
      provide: DROPZONE_CONFIG,
      useValue: DEFAULT_DROPZONE_CONFIG
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(overlayContainer: OverlayContainer) {
    overlayContainer.getContainerElement().classList.add('dark-theme');
  }
}

according to your README that's what I should be doing. It never says to remove elements that you were told to add by Angular's i18n Documentation.

Or that you will be using i18n differently now.

though I'm starting to suppose both of these are the case.

which is a good thing! ...But I just need to be told and be absolutely certain, this way implementing the library isn't an absolute shot in the dark.

[tatsujb]

With the above I get :

vendor.js:30179 ERROR Error: StaticInjectorError(AppModule)[I18n -> InjectionToken TranslationsFormat]: 
  StaticInjectorError(Platform: core)[I18n -> InjectionToken TranslationsFormat]: 
    NullInjectorError: No provider for InjectionToken TranslationsFormat!
    at NullInjector.get (vendor.js:29444)
    at resolveToken (vendor.js:29724)
    at tryResolveToken (vendor.js:29665)
    at StaticInjector.get (vendor.js:29536)
    at resolveToken (vendor.js:29724)
    at tryResolveToken (vendor.js:29665)
    at StaticInjector.get (vendor.js:29536)
    at resolveNgModuleDep (vendor.js:38652)
    at _createClass (vendor.js:38726)
    at _createProviderInstance$1 (vendor.js:38684)

in the browser console.

[Vadimator]

I have the same error

[florent1933]

@Vadimator , @tatsujb did you resolve this issue? I have the same error.

[tatsujb]

I did personally. sorry for not closing.

[dsnoeck]

@tatsujb, Good that you personnaly were able to resolve your issue. It would be even better to share your solution to help other with the same issue.

[tatsujb]

it really doesn't look like me to not share what I did.

usually I always do for this exact case scenario. I'm really sorry about this.

I got this answer on stackoverflow : https://stackoverflow.com/a/50903097/4770754 perhaps that's what led me to close this issue, I don't remember right now.

I don't have much time right now but I suggest you read though it. it'll probably contain the fix.