[Debugging] The pipe {name} could not be found

[Debugging] The pipe {name} could not be found

[Debugging] The pipe {name} could not be found

In this video, you’ll learn what the error “The pipe {name} could not be found” means, how to debug it, and prevent it from happening in the future.


Content

0.64 -> the pipe name could not be found you may
3.28 -> encounter this error when you reference
4.96 -> a pipe and a template that has either
7.04 -> not been imported
8.16 -> or not been named properly just like
10.32 -> components and directives
11.759 -> pipes must be declared or imported in an
14.16 -> ng module
15.36 -> in addition when referenced in a
16.88 -> template the name must match the name
19.279 -> specified
20.08 -> in the pipe decorator angular uses the
22.16 -> name in a template to determine which
24 -> pipe to execute
25.199 -> that means every pipe must have a name
27.199 -> and the name must be unique to that ng
29.119 -> module let's start by taking a look at a
31.439 -> simple reproduction and solution
33.52 -> then we'll review pipes in greater
34.88 -> detail to understand why this error
36.8 -> occurs
37.68 -> in our code base you'll notice we're
39.28 -> referencing a pipe with the name of
41.28 -> truncate
42.079 -> however the red underline in vs code is
44.559 -> telling us
45.2 -> that angular cannot find a pipe with
47.12 -> that name if you don't see the error in
48.96 -> vs code you might also find it in the
50.879 -> terminal
51.68 -> or in the browser console in either case
54 -> the stack trace will direct you to the
55.68 -> template file
56.559 -> that is causing the issue in order to
58.8 -> fix the issue we'll first want to verify
60.96 -> that the pipe is available in the
62.64 -> appropriate ng module
64.32 -> in this case we're attempting to use the
66.08 -> pipe in the app module
67.76 -> because it's a custom pipe that we're
69.439 -> developing in this project
70.88 -> it needs to be in the declarations for
72.72 -> this module just like
74.32 -> a component or directive now in other
76.56 -> cases the pipe may be exported by a
78.799 -> different module
79.84 -> or exported from a third party package
82.08 -> in which case you may need to import
83.84 -> that module
84.72 -> as opposed to adding the pipe to the
86.24 -> declarations at this point we have
88.24 -> verified that the pipe is available in
90.079 -> the ng module
91.119 -> but we're still getting the error the
92.72 -> next piece of code to check is the pipe
94.56 -> definition itself
95.68 -> and specifically the name option in the
97.759 -> pipe decorator
98.88 -> notice here how the pipe name is
100.56 -> shortened but in the template it's
102.479 -> referenced as truncate
103.84 -> the issue can be resolved by fixing the
105.84 -> mismatch either change the name
107.2 -> referenced in the template or change the
109.04 -> name parameter in the pipe decorator
111.439 -> that'll fix the issue and it brings up a
113.28 -> good opportunity to point out a best
115.04 -> practice that will prevent issues like
116.719 -> this from happening in the first place
118.479 -> when you create a pipe in angular it's
120.159 -> conventional for the pipe name
122 -> to match the file name where it's
123.52 -> defined notice how the pipe name is
125.36 -> truncate and the file name is
127.959 -> truncate.pipe.ts
129.28 -> when using the angular cli this best
131.44 -> practice will be applied automatically
133.68 -> now that we know how to resolve this
135.04 -> issue let's do a quick review of how
137.12 -> pipes work in angular to understand why
139.12 -> this issue happens in the first place
140.959 -> the role of a pipe in angular is to
143.12 -> transform values in the template and
145.12 -> unlike regular method calls
146.72 -> angular can optimize pipes they're
148.72 -> especially useful when you have an
150.239 -> expression or value
151.68 -> like a number that needs to be
153.44 -> reformatted as a currency decimal
155.68 -> or some other format angular has a
157.84 -> handful of built-in pipes
159.28 -> or you can create your own from scratch
161.2 -> when angular encounters the pipe
162.64 -> character in a template expression
164.64 -> it uses the name of the pipe to
166.16 -> determine which class has the function
168.08 -> to execute
168.959 -> if an invalid name is provided angular
171.12 -> has no way to find the corresponding
173.04 -> function
173.76 -> but when it is valid it'll match that
175.68 -> name to the pipe class
177.36 -> which implements a pipe transform
179.28 -> function the transform function
181.28 -> takes the value provided from the
182.64 -> template along with any additional
184.48 -> arguments
185.2 -> then returns a new value which is
187.04 -> ultimately shown to the end user
189.2 -> let's go ahead and recap when you
190.64 -> encounter the pipe name not found error
192.959 -> it means a pipe has been referenced in a
194.8 -> template that has either not been
196.48 -> imported
197.12 -> or not been named properly resolve the
199.519 -> issue by first verifying that the pipe
201.68 -> has been imported or declared
203.519 -> in the appropriate ng module if the
205.599 -> issue remains check the pipe definition
207.599 -> itself to verify that the name
209.599 -> matches the name declared in the
211.04 -> template for additional examples and
213.12 -> details
213.68 -> reference the official angular
215.239 -> documentation

Source: https://www.youtube.com/watch?v=maI2u6Sxk9M