Make a custom pipes module

Question

I am in the process of breaking my application into modules but I am having a bit of trouble with pipes, I have a few pipes that I need used across the app.

I tried making my own pipes module but that doesn't seem to have worked as I expected.

Here's what I have done.

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

import {GetCountPipe} from "./get-count.pipe";
import {TruncateWordsPipe, TruncateCharactersPipe} from "./truncate.pipe";
import {FilterStatusPipe} from "./filter-status.pipe";

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    GetCountPipe,
    TruncateCharactersPipe,
    TruncateWordsPipe,
    FilterStatusPipe
  ],
  exports: [
    GetCountPipe,
    TruncateCharactersPipe,
    TruncateWordsPipe,
    FilterStatusPipe
  ]
})
export class UpPipesModule { }

I would like to be able to import this into my GlobalsModule so that I only need to import it once and then everywhere that I import GlobalsModule I will also get access to all the pipes in UpPipesModule

ERROR: Simply put my pipes don't seem to be loaded when I add GlobalModules to the Module I am importing it to. Hence I get the following error.

fs.js:106 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at TruncateCharactersPipe.webpackJsonp.888.TruncateCharactersPipe.transform (truncate.pipe.ts:13)

As for what do I want to happen. I want my pipes to load into a single module that I can include inside my GlobalModule which I can then import into my application sub modules, each of which represents a section of the app.

Pipes causing error:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncateCharactersPipe implements PipeTransform {
  transform(value: string, limit: number = 40, trail: String = '…'): string {
    if (limit < 0) {
      limit *= -1;
      return value.length > limit ? trail + value.substring(value.length - limit, value.length) : value;
    } else {
      return value.length > limit ? value.substring(0, limit) + trail : value;
    }
  }
}

@Pipe({
  name: 'words'
})
export class TruncateWordsPipe implements PipeTransform {
  transform(value: string, limit: number = 40, trail: String = '…'): string {
    let result = value;

    if (value) {
      let words = value.split(/\s+/);
      if (words.length > Math.abs(limit)) {
        if (limit < 0) {
          limit *= -1;
          result = trail + words.slice(words.length - limit, words.length).join(' ');
        } else {
          result = words.slice(0, limit).join(' ') + trail;
        }
      }
    }

    return result;
  }
}

*that doesn't seem to have worked as I expected*: so, what did you do with this module, what did you expect to happen, and what happened instead? — JB Nizet, Apr 30 '17 at 08:27
@JBNizet the expectation that pipes are available globally is clear, but I also have no idea what is the actual behavior. — Tatsuyuki Ishi, Apr 30 '17 at 08:29
If your pipes were not loaded, you would not be able to call the Truncate pipe, and would thus not get this error thrown by the TruncateCharactersPipe's transform method, at line 13. You just have a bug in TruncateCharactersPipe, or in the way you're using it: it tries to access the `length` property of something undefined. — JB Nizet, Apr 30 '17 at 08:48
But when I declare the pipes individually in app.module.ts I don't get that error. Why would putting them into a pipes module cause the pipe to break? — Daimz, Apr 30 '17 at 08:59
Probably because you changed something else. Anyway, the problem is that the value is undefined, and that you're trying to access its length. You probably want to return an empty string (or the value itself) if it's undefined, as you're doing in your second pipe. — JB Nizet, Apr 30 '17 at 09:05
@Daimz it seems that your pipe is applied on field which is undefined. Does adding default value in your transform method definition fixes issue? `transform(value: string = '' ...` — Andrius, Apr 30 '17 at 14:43

Make a custom pipes module

0 Answers0