पाइप '' को कोणीय 2 कस्टम पाइप नहीं मिला

Question

मैं इस त्रुटि को ठीक करने के लिए प्रतीत नहीं कर सकता। मेरे पास एक खोज बार और एक ngFor है। मैं इस तरह से एक कस्टम पाइप का उपयोग करके सरणी को फ़िल्टर करने का प्रयास कर रहा हूं:

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

import { User } from '../user/user';

@Pipe({
  name: 'usersPipe',
  pure: false
})
export class UsersPipe implements PipeTransform {
  transform(users: User [], searchTerm: string) {
    return users.filter(user => user.name.indexOf(searchTerm) !== -1);
  }
}

उपयोग:

<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">

<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>

त्रुटि:

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
    <div  
    [ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">

कोणीय संस्करण:

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"

Comments

क्या आपने इसे घटक के पाइप में शामिल किया था?

— हैरी निन्ह

मुझे बस एहसास हुआ कि यही कारण था। कस्टम पाइप के लिए कोणीय उदाहरण कैसे आता है यह कभी नहीं होता है: angular.io/resources/live-examples/pipes/ts/plnkr.html

— सुमामा वहीद

उन्होंने इसे वैश्विक पाइप के रूप में परिभाषित किया। यदि आप इसे कई स्थानों पर उपयोग करते हैं और हर एक एनोटेशन में परिभाषित नहीं करना चाहते हैं तो आप अपने कस्टम पाइप के लिए भी ऐसा कर सकते हैं।

— हैरी निन्ह

@SumamaWaheed मुझे पूरा यकीन है कि यह डॉक्स में कुछ बिंदु पर था, लेकिन आप सही हैं डॉक्स अब उल्लेख / शो नहीं करते हैं।

— माइकल एंजेलो

Answer 1

सुनिश्चित करें कि आप "क्रॉस मॉड्यूल" समस्या का सामना नहीं कर रहे हैं

यदि घटक जो पाइप का उपयोग कर रहा है, वह उस मॉड्यूल से संबंधित नहीं है, जिसने पाइप घटक को "विश्व स्तर पर" घोषित किया है, तो पाइप नहीं मिला है और आपको यह त्रुटि संदेश मिलता है।

मेरे मामले में मैंने पाइप को एक अलग मॉड्यूल में घोषित किया है और इस पाइप मॉड्यूल को पाइप का उपयोग करते हुए किसी अन्य मॉड्यूल में आयात किया है।

मैंने घोषणा की है कि जिस घटक में आप पाइप का उपयोग कर रहे हैं वह है

पाइप मॉड्यूल

 import { NgModule }      from '@angular/core';
 import { myDateFormat }          from '../directives/myDateFormat';

 @NgModule({
     imports:        [],
     declarations:   [myDateFormat],
     exports:        [myDateFormat],
 })

 export class PipeModule {

   static forRoot() {
      return {
          ngModule: PipeModule,
          providers: [],
      };
   }
 } 

एक अन्य मॉड्यूल में उपयोग (उदाहरण के लिए app.module)

  // Import APPLICATION MODULES
  ...
  import { PipeModule }    from './tools/PipeModule';

  @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

Comments

यह समाधान एकमात्र था जिसने मेरे लिए काम किया। टर्न आउट पाइप के लिए एक मॉड्यूल की आवश्यकता होती है

— एजे ज़ेन

मुझे भी यह अनुमान लगाया गया कि मेरे पाइप को आंशिक रूप से हल करने के लिए Ng 2.8 में त्रुटि नहीं मिली। * इसके अलावा, मेरे पास टाइपिंग "चेतावनियां" थीं जो केवल नामकरण सम्मेलनों से संबंधित थीं, जो कि इन्हें हल करने पर, इस कस्टम पाइप को ठीक से ट्रांसप्लीन करने में योगदान दिया और अंततः मिला। टेम्पलेट में।

— CNSKnight

यह वास्तव में एकमात्र समाधान है जो मेरे लिए काम करता है! मैंने पूरे साझा मॉड्यूल की कोशिश की, लेकिन इस समाधान ने एक आकर्षण की तरह काम किया। शुक्रिया @ कार्ल!

— लुलु 88

हम अपने घटक परीक्षण में इसका परीक्षण कैसे करते हैं,

— अपूर्व

धन्यवाद! मेरी समस्या यह थी कि मैं "निर्यात:" [myPipe] "यह सोचकर छूट गया था कि निर्यात केवल मॉड्यूल के लिए हैं!

— रफीक मोहम्मद

Answer 2

आपको मॉड्यूल घोषणा में अपना पाइप शामिल करना होगा:

declarations: [ UsersPipe ],
providers: [UsersPipe]

Comments

बस एक नोट, मैंने मूल रूप से सिर्फ प्रदाताओं में पाइप को शामिल किया है। इसे मॉड्यूल फ़ाइल में घोषणाओं और प्रदाताओं दोनों में शामिल किया जाना चाहिए।

— ग्रेग ए

मैं तब तक संघर्ष कर रहा था जब तक मैंने आपके सुझाव का पालन नहीं किया। मैं लगभग 4 घंटे की बर्बादी सिर्फ यह पता लगाने के लिए। सुझाव के लिए धन्यवाद।

— user1501382

यह दस्तावेज क्यों नहीं है? प्रलेखन में कहा गया है You must include your pipe in the declarations array of the AppModule.: angular.io/guide/pipes । वैसे भी, आपका जवाब मेरी समस्या को भी ठीक करता है।

— मार्टिज़न

धन्यवाद, युवावस्था मैं एक विवरण जोड़ता हूं: मॉड्यूल की घोषणा जहां आपको पाइप की आवश्यकता होती है।

— विनीकोस टॉरेस

exports: [UsersPipe]यदि मॉड्यूल अन्य मॉड्यूल द्वारा आयात किया जा रहा है , तो इसे भी शामिल करना न भूलें ।

— प्रीसैस्टिक

Answer 3

Ionic के लिए आप @Karl के रूप में कई मुद्दों का सामना कर सकते हैं। आयनिक आलसी लोड पृष्ठों के लिए जो समाधान त्रुटिपूर्ण काम करता है वह है:

1. निम्नलिखित फाइलों के साथ पाइप डायरेक्टरी बनाएं: pip.ts और pip.module.ts

// पाइप्स। कंटेंट (इसमें कई पाइप हो सकते हैं, बस याद रखें

use @Pipe function before each class)
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: "toArray" })
export class toArrayPipe implements PipeTransform {
  transform(value, args: string[]): any {
    if (!value) return value;
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key] });
    }
    return keys;
  }
}

// पाइप.module.ts सामग्री

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { toArrayPipe } from "./pipes";

@NgModule({
  declarations: [toArrayPipe],
  imports: [IonicModule],
  exports: [toArrayPipe]
})
export class PipesModule {}

2. App.module में PipesModule और @NgModule आयात अनुभाग शामिल करें

   import { PipesModule } from "../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] });

3. अपने प्रत्येक .module.ts में जहां आप कस्टम पाइप का उपयोग करना चाहते हैं, वहां पाइप्समॉडल शामिल करें। इसे आयात अनुभाग में जोड़ना न भूलें। // उदाहरण। फ़ाइल: पेज / माय-कस्टम-पेज / माय-कस्टम-पेज.module.ts

   import { PipesModule } from "../../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] })

4. बस। अब आप अपने टेम्पलेट में अपने कस्टम पाइप का उपयोग कर सकते हैं। पूर्व।

<div *ngFor="let prop of myObject | toArray">{{ prop.key }}</div>

Comments

यह आयनिक के लिए एक जीवनरक्षक था, धन्यवाद। क्योंकि "आयनिक पाइप उत्पन्न करता है ...." पाइपों को बनाने के लिए आवश्यक सभी चरणों को उत्पन्न नहीं करता है। आपके दृष्टिकोण ने पूरी तरह से काम किया। ध्यान दें, आयनिक v4 के लिए, आयात पथों में कुछ छोटे बदलावों की आवश्यकता है।

— रोयप्पा

मैंने पाया कि आपको app.module.ts में आयात की आवश्यकता नहीं है, ताकि कदम को छोड़ा जा सके। यह होना चाहिए क्योंकि यह "साझा मॉड्यूल" वैसे भी एक दूसरे मॉड्यूल में आयात किया जा रहा है जहां इसकी आवश्यकता है। यह अच्छा होगा यदि app.module आयात विश्व स्तर पर काम करता है, लेकिन मैंने कोशिश की और यह नहीं करता है।

— रोयप्पा

मैं अभी भी इसका सामना कर रहा हूं: CONSOLE ERROR फाइल: node_modules/@angular/core/fesm5/core.js: 4002: 0 ERROR एरर: अनकवर्ड (वादे में): NullInjectorError: StaticInjectorError (AppModule) - ToHtmlPipe - >SS-> (प्लेटफार्म: कोर) [ToHtmlPipe -> DOMSanitizer]: NullInjectorError: DomSanitizer के लिए कोई प्रदाता नहीं!

— मिरिकोबिनी

Answer 4

मैंने अपनी स्थिति के लिए "क्रॉस मॉड्यूल" उत्तर को बहुत उपयोगी पाया, लेकिन उस पर विस्तार करना चाहता हूं, क्योंकि विचार करने के लिए एक और शिकन है। यदि आपके पास एक सबमॉड्यूल है, तो यह मेरे परीक्षण में मूल मॉड्यूल में पाइप भी नहीं देख सकता है। उस कारण से भी, आपको अपने अलग मॉड्यूल में पाइप लगाने की आवश्यकता हो सकती है।

यहां उन चरणों का सारांश दिया गया है, जो सबमॉड्यूल में दिखाई नहीं देने वाले पाइपों को संबोधित करते हैं:

1. (माता-पिता) शेर्डमॉडुले से पाइप लें और पाइपमॉडल में डालें
2. SharedModule में, PipModule और निर्यात आयात करें (ऐप के अन्य भागों के लिए SharMModule पर निर्भर होकर स्वचालित रूप से PipModule तक पहुंच प्राप्त करें)
3. सब-शेयर्डमोडुले के लिए, पाइपमोडुले को आयात करें, इसलिए यह शेर्डमॉड्यूल को फिर से आयात किए बिना, पाइपमॉडल तक पहुंच प्राप्त कर सकता है, जो अन्य समस्याओं के बीच एक परिपत्र निर्भरता मुद्दा बनाएगा।

उपरोक्त "क्रॉस मॉड्यूल" उत्तर के लिए एक और फुटनोट: जब मैंने पाइपमॉडल बनाया तो मैंने अपने साझा मॉड्यूल में फॉररूट स्टैटिक विधि को हटा दिया और इसके बिना पाइपमॉडल को आयात किया। मेरी बुनियादी समझ यह है कि forRoot सिंगलटन जैसे परिदृश्यों के लिए उपयोगी है, जो आवश्यक रूप से फ़िल्टर पर लागू नहीं होते हैं।

Comments

इसे जोड़ने के लिए धन्यवाद। यह मेरे लिए केवल एक बार काम करता था जब इसे उप-साझायोडुम में जोड़ा गया था

— jmcgrath207

यहाँ भी वही, जो मुझे याद आ रहा था वह सब-शेयरडम्यूल में पाइप्समॉडल आयात कर रहा था।

— टेंडरलॉइन

Answer 5

एक विकल्प का सुझाव दे रहा हैयहां उत्तर :

पाइप के लिए एक अलग मॉड्यूल बनाना आवश्यक नहीं है , लेकिन निश्चित रूप से एक विकल्प है। आधिकारिक डॉक्स फुटनोट की जाँच करें: https://angular.io/guide/pipes#custom-pipes

आप अपने कस्टम पाइप का उपयोग उसी तरह से करते हैं जैसे आप बिल्ट-इन पाइप का उपयोग करते हैं।
आपको अपने पाइप को AppModule के घोषणापत्र सरणी में शामिल करना होगा। यदि आप अपने पाइप को एक कक्षा में इंजेक्ट करना चुनते हैं, तो आपको इसे अपने NgModule के प्रदाताओं के सरणी में प्रदान करना होगा।

आपको बस इतना करना है कि आप अपने पाइप को घोषणाओं की सरणी में जोड़ दें , और प्रदाता सरणी में moduleजहां आप पाइप का उपयोग करना चाहते हैं।

declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]

Comments

लेकिन एक एकल पाइप 2 मॉड्यूल का हिस्सा नहीं हो सकता है .... उपरोक्त दृष्टिकोण विभिन्न मॉड्यूल में इसे अधिक स्वीकार्य बनाता है।

— हिमांशु बंसल

Answer 6

ध्यान दें : केवल अगर आप कोणीय मॉड्यूल का उपयोग नहीं कर रहे हैं

किसी कारण से यह डॉक्स में नहीं है, लेकिन मुझे घटक में कस्टम पाइप को आयात करना पड़ा

import {UsersPipe} from './users-filter.pipe'

@Component({
    ...
    pipes:      [UsersPipe]
})

Comments

आपके द्वारा ऊपर पोस्ट किए गए प्लंकर में, पाइपों को ऐप मॉड्यूल में आयात किया जाता है (ठीक वैसे ही जैसे आप स्वयं घटकों के साथ करते हैं) जो उस मॉड्यूल में सभी घटकों के लिए पाइप उपलब्ध कराता है।

— एबीबिन

ओह ठीक है मैं वास्तव में उस घटक को देख रहा था जो वास्तव में कस्टम पाइप का उपयोग करता है। मुझे नहीं पता था कि इसे ऐप मॉड्यूल में विश्व स्तर पर आयात किया जा सकता है। धन्यवाद

— सुममा वहीद

उन-filter.pipe? क्यों?

— नाथ वेबर

यह सिर्फ एक नामकरण सम्मेलन है, फ़ाइल को यूजर्स- filter.pipe.ts कहा जाता है

— सुमामा वहीद

@SachinThampan हो सकता है क्योंकि यह तब था जब कोणीय rc5 में था मुझे लगता है..तब तब से विशेष रूप से NgModule के साथ बदल गया। कृपया NgModule के लिए डॉक्स देखें

— सुमाया वहीद

Answer 7

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

@Pipe({
  name: 'timePipe'
})
export class TimeValuePipe implements PipeTransform {

  transform(value: any, args?: any): any {
   var hoursMinutes = value.split(/[.:]/);
  var hours = parseInt(hoursMinutes[0], 10);
  var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
  console.log('hours ', hours);
  console.log('minutes ', minutes/60);
  return (hours + minutes / 60).toFixed(2);
  }
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  order = [
    {
      "order_status": "Still at Shop",
      "order_id": "0:02"
    },
    {
      "order_status": "On the way",
      "order_id": "02:29"
    },
    {
      "order_status": "Delivered",
      "order_id": "16:14"
    },
     {
      "order_status": "Delivered",
      "order_id": "07:30"
    }
  ]
}

Invoke this module in App.Module.ts file.

Answer 8

मैंने उसी निर्देशिका में पाइप के लिए एक मॉड्यूल बनाया है जहां मेरे पाइप मौजूद हैं

import { NgModule } from '@angular/core';
///import pipe...
import { Base64ToImage, TruncateString} from './'  

   @NgModule({
        imports: [],
        declarations: [Base64ToImage, TruncateString],
        exports: [Base64ToImage, TruncateString]
    })

    export class SharedPipeModule { }   

अब उस मॉड्यूल को app.module में आयात करें:

import {SharedPipeModule} from './pipe/shared.pipe.module'
 @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

अब इसे नेस्टेड मॉड्यूल में समान आयात करके उपयोग किया जा सकता है