ERROR TypeError: Cannot read property 'trim' of undefined

Olá Pessoal,

Estou recebendo o erro abaixo durante a execução da rota que carrega o photo-list, após a finalização deste último exercício:

"PhotoListComponent.html:12 ERROR TypeError: Cannot read property 'trim' of undefined at FilterByDescription.push../src/app/photos/photo-list/filter-by-description.pipe.ts.FilterByDescription.transform (filter-by-description.pipe.ts:10) at checkAndUpdatePureExpressionInline (core.js:9942) at checkAndUpdateNodeInline (core.js:10511) at checkAndUpdateNode (core.js:10469) at debugCheckAndUpdateNode (core.js:11102) at debugCheckDirectivesFn (core.js:11062) at Object.eval [as updateDirectives] (PhotoListComponent.html:12) at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054) at checkAndUpdateView (core.js:10451) at callViewAction (core.js:10692)"

Abaixo o trecho de código utilizado (mesmo do curso):

export class FilterByDescription implements PipeTransform{
    transform(photos: Photo[], descriptionQuery: string) {
        descriptionQuery = descriptionQuery.trim().toLowerCase();
        if(descriptionQuery){
            return photos.filter(photo => photo.description.toLowerCase().includes(descriptionQuery));
        } else {
            return photos;
        }
    }
}

Apenas confirmando que após o Page Load, qualquer pesquisa ou limpeza do campo de busca funciona perfeitamente!

Em todo modo verifiquei que no momento do Page Load a property filter ainda não está definida, e por isso vai para o pipe como undefined, gerando erros nos métodos de Trim e toLowerCase.

Neste caso alterei o processo de Trim e toLowerCase para dentro do if(descriptionQuery), forçando a execução desses parametros apenas se o objeto de fato existir.

Imagino que neste contexto, o melhor seria deixar a tranformaçao do texto dentro do if mesmo, ou iniciar a string vazia no pipe:

export class FilterByDescription implements PipeTransform{
    transform(photos: Photo[], descriptionQuery: string = '') {
        console.log(descriptionQuery);
        descriptionQuery = descriptionQuery.trim().toLowerCase();

        if(descriptionQuery){
            return photos.filter(photo => photo.description.toLowerCase().includes(descriptionQuery));
        } else {
            return photos;
        }
    }
}

Gostaria de saber se este é o comportamento esperado (pois não reflete o apresentado nesta aula), ou se pode haver alguma relação com versão de módulos/ componentes do Angular, Typescript, Webpack, etc.

Obrigado!