date pipe error - Cannot read property 'toLowerCase' of undefined' when upgraded to Angular 11

Question

I upgraded my Angular app from v10 to v11.

It uses some std (not custom) pipes - date, currency, uppercase etc.

The date and currency ones are now giving me errors. For example:

core.js:5980 ERROR Error: InvalidPipeArgument: 'Cannot read property 'toLowerCase' of undefined' for pipe 'DatePipe'

I'm just importing the CommonModule for the std pipes as before:

import { CommonModule } from '@angular/common';

Answer 1

My problem was that I had this in my app.module.ts:

{
    provide: LOCALE_ID,
    useFactory: (translate: TranslateService) => {
        switch (translate.currentLang) {
            case "en":
            case "en_GB":
                registerLocaleData(localeEN)
                break;
            case "es":
            case "es_ES":
                registerLocaleData(localeES)
                break;
            default:
                registerLocaleData(localeEN)
                break;
        }
        return translate.currentLang;
    },
    deps: [TranslateService]
},

But return translate.currentLang; was undefined and returning undefined was what was causing this error. So changing it to return translate.currentLang != undefined ? translate.currentLang : "en"; solved the problem.