Angular 2 RC.5共享模块无法找到管道

时间:2016-09-02 01:05:40

标签: angular angular-module

我正在更新我的应用程序以使用模块结构,并且在尝试将我的管道组件添加到共享模块时遇到了一个奇怪的问题。从我所读过的内容来看,我所做的一切都是正确的,所以我必须遗漏一些东西。

错误:Unhandled Promise rejection: Template parse errors: The pipe 'cmgTitleize' could not be found

我有BrowseModule,此模块声明ProjectCardComponent,其中有一个使用cmgTitleize管道的模板。要提供对TitleizePipe的访问权限,请导入我的SharedModule

@NgModule({
  declarations: [
    ...,
    ProjectCardComponent
  ],
  imports: [
    ...,
    SharedModule
  ],
  providers: [
    ...
  ]
})

export class BrowseModule { }

SharedModule,导入PipesModule

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

export class SharedModule { }

PipesModule声明并导出TitelizePipe

@NgModule({
  declarations: [
    ...
    TitleizePipe
  ],
  exports: [
    ...
    TitleizePipe
  ]
})

export class PipesModule { }

最后,为了进行健全检查,继续使用TitleizePipe:

@Pipe({
  name: 'cmgTitleize'
})

export class TitleizePipe implements PipeTransform {
  ...
}

2 个答案:

答案 0 :(得分:5)

看起来我只需要导出PipesModule

中的SharedModule

答案 1 :(得分:2)

如果您正在使用静态" forRoot()"在共享模块中,您仍然需要导出管道或任何其他所需模块:

@NgModule({
    exports: [
        MyPipesModule                   //<---------------- HERE
    ]
})
export class SharedModule { 
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [
                MySingletonServices
            ]
        };
    }
}

然后您只需在主应用模块中导入它:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        SharedModule.forRoot()       // <------------
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }