Upon loading my Angular 2 application, I encountered the following error:
EXCEPTION: Error: Uncaught (in promise): Unexpected piped value 'undefined' on the View of component 'DashboardComponent'
An interesting observation is that by uncommenting a specific line and removing the "CustomPipe" reference from "appCore", the application functions correctly again:
//import {CustomPipe} from "../shared/customPipe"
This situation raises questions about the correct importing and exporting of classes when utilizing the "parent" export file "appCore.ts," or if there might be an issue with Angular 2 itself.
Is there a mistake I am making in this setup?
Here is the Example Project on Github
CustomPipe.ts
import {Pipe, PipeTransform} from "angular2/core"
@Pipe({ name: "CustomPipe" })
export class CustomPipe implements PipeTransform
{
constructor()
{
console.log("created");
}
public transform(value: string, args: any[]): string
{
return "this value has been transformed into me via a custom pipe";
}
}
appCore.ts
export * from "./dashboard/dashboardComponent"
export * from "./vehicles/VehicleListComponent"
export * from "./vehicles/VehicleComponent"
export * from "./shared/nestedComponent"
export * from "./interfaces/IVehicleService"
export * from "./shared/staticVehicleService"
export * from "./shared/VehicleService"
export * from "./shared/customPipe"
dashboardComponent.ts
import {Component, Output, EventEmitter, OnInit, Inject, Injectable, provide, OpaqueToken} from "angular2/core"
import {CustomPipe, IVehicleService, StaticVehicleService} from "../appCore"
//import {CustomPipe} from "../shared/customPipe"
import {NestedComponent} from "../shared/nestedComponent"
import {Observable} from "rxjs/Rx"
import {IVehicleServiceToken} from "../interfaces/IVehicleService"
@Component({
selector: "my-app",
templateUrl: "./app/dashboard/dashboardComponent.html",
styleUrls: ["./app/dashboard/dashboardComponent.css"],
directives: [NestedComponent],
pipes: [CustomPipe]
})
export class DashboardComponent implements OnInit
{
}
Edit: Here is a Plunker showcasing the issue: Take a look at app/characters/character-list.component.ts line 5 & 6. The plunk will not work as intended initially, but if you uncomment line 6 and remove "CharacterService" from line 5, it will start functioning correctly.