Uncaught (in promise): Error: The pipe 'transloco' could not be found -- in production!

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

After building my app for production and deploying it to our IIS Server, I get the following error:

Error: Uncaught (in promise): Error: The pipe 'transloco' could not be found!
Error: The pipe 'transloco' could not be found!
    at main-es2015.44cff5664e78db348c3b.js:1
    at Object.Gl (main-es2015.44cff5664e78db348c3b.js:1)
    at template (main-es2015.44cff5664e78db348c3b.js:1)
    at nr (main-es2015.44cff5664e78db348c3b.js:1)
    at Zo (main-es2015.44cff5664e78db348c3b.js:1)
    at yr (main-es2015.44cff5664e78db348c3b.js:1)
    at main-es2015.44cff5664e78db348c3b.js:1
    at Zo (main-es2015.44cff5664e78db348c3b.js:1)
    at kl.create (main-es2015.44cff5664e78db348c3b.js:1)
    at si.createComponent (main-es2015.44cff5664e78db348c3b.js:1)
    at T (polyfills-es2015.f16d8c155ce481952821.js:1)
    at T (polyfills-es2015.f16d8c155ce481952821.js:1)
    at polyfills-es2015.f16d8c155ce481952821.js:1
    at l.invokeTask (polyfills-es2015.f16d8c155ce481952821.js:1)
    at Object.onInvokeTask (main-es2015.44cff5664e78db348c3b.js:1)
    at l.invokeTask (polyfills-es2015.f16d8c155ce481952821.js:1)
    at i.runTask (polyfills-es2015.f16d8c155ce481952821.js:1)
    at m (polyfills-es2015.f16d8c155ce481952821.js:1)
    at u.invokeTask [as invoke] (polyfills-es2015.f16d8c155ce481952821.js:1)
    at p (polyfills-es2015.f16d8c155ce481952821.js:1)

Expected behavior

No error like in development mode

Minimal reproduction of the problem with instructions

Using a module to configure transloco like shown in installation instructions on your website.

import {CommonModule} from '@angular/common';
import {HttpClient} from '@angular/common/http';
import {FormsModule} from '@angular/forms';
import {MatSelectModule} from '@angular/material/select';
import {
  TRANSLOCO_LOADER,
  Translation,
  TranslocoLoader,
  TRANSLOCO_CONFIG,
  translocoConfig,
  TranslocoModule
} from '@ngneat/transloco';
import {Injectable, NgModule} from '@angular/core';
import {TranslocoLocaleModule} from '@ngneat/transloco-locale';
import {TranslocoMessageFormatModule} from '@ngneat/transloco-messageformat';
import {Observable} from 'rxjs';
import {environment} from '../../environments/environment';
import {DemoComponent} from './demo/demo.component';
import {LanguageChangerComponent} from './language-changer/language-changer.component';

@Injectable({providedIn: 'root'})
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {
  }

  getTranslation(lang: string): Observable<Translation> | Promise<Translation> {
    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
  }
}

@NgModule({
  exports: [TranslocoModule, DemoComponent, LanguageChangerComponent],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ['en', 'de'],
        defaultLang: 'de',
        reRenderOnLangChange: true,
        prodMode: environment.production
      })
    },
    {provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader}
  ],
  declarations: [DemoComponent, LanguageChangerComponent],
  imports: [
    CommonModule,
    TranslocoMessageFormatModule.init(),
    TranslocoLocaleModule.init({
      defaultLocale: 'de-DE',
      langToLocaleMapping: {
        en: 'en-US',
        de: 'de-DE'
      }
    }),
    MatSelectModule,
    FormsModule
  ]
})

export class I18nTranslocoModule {
}

import {ErrorHandler, Injectable, NgModule} from '@angular/core';
import {I18nTranslocoModule} from './i18n-transloco/i18n.transloco.module';

@Injectable()
export class AppDateAdapter extends NativeDateAdapter {

@NgModule({
    declarations: [
    ],
    imports: [
        I18nTranslocoModule,
    ],
})
export class AppModule { }

DemoComponent: just contains a few strings with the transloco pipe used

  <ul>
    <li>{{'demo.things' | transloco:{ count: 0 } }}</li>
    <li>{{'demo.things' | transloco:{ count: 1 } }}</li>
    <li>{{'demo.things' | transloco:{ count: 2 } }}</li>
  </ul>
  <ul>
    <li>{{'demo.people' | transloco:{ gender: 'female', name: 'Sarah' } }}</li>
    <li>{{'demo.people' | transloco:{ gender: 'male', name: 'Peter' } }}</li>
    <li>{{'demo.people' | transloco:{ name: 'Sarah + Peter' } }}</li>
  </ul>

Environment

Angular version: 10.0.4

Browser:
- [x] Chrome (desktop) version 80.0.3987.87
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Others:
Windows Server running IIS

[Gamewalker]

Finally: Github: https://github.com/Gamewalker/transloco-pipe-error Apache: https://angular.code4everyone.de/

It happens on ng serve and ng build --prod

@itayod always tried with newest version

[shaharkazaz]

@Gamewalker @jmls If this is still relevant after you tried my comment feel free to reopen this 🙂