The pipe 'truncate' could not be found

Question

I'm a bit confused with pipes,I know there are some few question similar to this but I haven't seen a problem with nested components I'm using Angular ^4.1.3 with the angular-seed 2 repo it works when I used the root component but I need it in the student component which is nested in the home component

├── src                        
│   └── client
│       ├── app
│       │   ├── app.component.e2e-spec.ts
│       │   ├── app.component.html
│       │   ├── app.component.spec.ts
│       │   ├── app.component.ts
│       │   ├── app.module.ts
│       │   ├── app.routes.ts
│       │   ├── home <---- it works here
|       |   |   ├── student <---but not here
│       │   │   |   ├── student.component.scss
|       |   │   │   ├── student.component.html
|       |   │   |   ├── student.component.ts
|       |   │   |   |── student.module.ts
|       |   |   ├── class
│       │   │   |   ├── class.component.scss
|       |   │   │   ├── class.component.html
|       |   │   |   ├── class.component.ts
│       │   │   ├── home.component.css
│       │   │   ├── home.component.html
│       │   │   ├── home.component.ts 
│       │   │   ├── home.module.ts
│       │   │   ├── home.routes.ts

I don't know what I'm missing but I still getting the message The pipe 'truncate' could not be found

src/client/app/home/student/student.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StudentComponent } from './student.component';
import { TruncatePipe } from '../../truncate.pipe';


@NgModule({
  imports: [BrowserModule],
  declarations: [StudentComponent , TruncatePipe],
  exports: [StudentComponent ],
  providers: []
})
export class StudentModule { }

/src/client/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { APP_BASE_HREF } from '@angular/common';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AboutModule } from './about/about.module';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';
import { PipeModule } from './shared/pipes.module';

@NgModule({
  imports: [BrowserModule,
                    BrowserAnimationsModule,
                    HttpModule,
                    AppRoutingModule,
                    AboutModule,
                    HomeModule,
                    SharedModule.forRoot(),
                    PipeModule.forRoot() ],

  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [AppComponent]

})
export class AppModule { }

thanks for reply and yes, It's included and declared on my app.module.ts ...also in student.module.ts dont know if It is right to have it declare twice... in my app module and student module..late I should get an error.. but I just testing to know why it doesn't recognise the pipe — Marcogomesr, Jun 26 '17 at 10:20
I'm sorry it was a mistake, I wanted to say in `exports:[]` take a look on this answer https://stackoverflow.com/questions/39007130/the-pipe-could-not-be-found-angular2-custom-pipe — Yordan Nikolov, Jun 26 '17 at 10:43
TruncatePipe is declared in the StudentModule, but the StudentModule is not imported by the AppModule. Why do you even have a StudentModule in the first place? You don't need to have a module for each and every component. Modules should rather by by coarse-grained feature. — JB Nizet, Jun 26 '17 at 11:33
@JBNizet I created that module reading this https://stackoverflow.com/questions/42677714/the-pipe-saferesourceurl-could-not-be-found where they said that I can't access globally and I need to imported where I need that's why thought If I need it here I have to create a module for this ...but I'm trying to do how is in https://stackoverflow.com/questions/39007130/the-pipe-could-not-be-found-angular2-custom-pipe they create a module pipe and imported on other module — Marcogomesr, Jun 26 '17 at 11:57
@JBNizet no even the build pipes work, it works in home.component.html but not on student.component.html — Marcogomesr, Jun 26 '17 at 14:26

score 2 · Accepted Answer · answered Jun 27 '17 at 09:27

I solved it taking a different approach, instead of running the pipe in the student component I did it in the home component that has an *ngFor at the

src/client/app/home/home.component.html

<app-student *ngFor="let s of students| truncate "></app-student>

src/client/app/truncate.pipe.ts

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

@Pipe({
    name: 'truncate'
})

export class TruncatePipe implements PipeTransform {
    transform(value: any): any {

        for(const item of value){
            if( item.name.length > 18){
                item.name = item.name.substring(0, 18) + '...';
            }
        }

        return value;
    }
}

src/client/app/home/home.module.ts

import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
import { SharedModule } from '../shared/shared.module';
import { TruncatePipe } from '../truncate.pipe';

@NgModule({
  imports: [HomeRoutingModule, SharedModule],
  declarations: [HomeComponent, TruncatePipe],
  exports: [HomeComponent]
})
export class HomeModule { }

thank you for all your suggestions It gave me some ideas, unfortunately, didn't work, I still having no idea why built pipes are not working on the student component

src/client/app/home/student/student.component.html

{{ 'this is a test' | uppercase }} <--- doesn't work

I know that looks weird but following the tutorial Angular 4 the complete guide there is a full section about pipes and looks like this is a normal practice to use pipes on a *ngFor.

The pipe 'truncate' could not be found

1 Answers1