Ionic,仅在AoT Compiler中找不到管道'translate'

时间:2018-05-14 16:13:10

标签: ionic-framework ngx-translate

当我尝试构建生产版本时,我在Ionic App中遇到了ngx-translate的问题。

在开发过程中,翻译工作正常

ionic serve

ionic cordova build android

但如果我尝试使用

进行生产构建
ionic cordova build android --prod --release

或PWA

ionic build --prod

我遇到了一些错误,比如

[17:47:15]  typescript error 
            The pipe 'translate' could not be found ( ... )

版本:

  • ngx-translate:8.0.0
  • 离子:3.9.2
  • Angular:5.2.10

我查了一下:https://github.com/ngx-translate/core/tree/v8.0.0但找不到我做错的事。

在app.module中:

// https://github.com/ngx-translate/core#1-import-the-translatemodule
// AoT requires an exported function for factories
export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader( http, './assets/i18n/', '.json' );
} 

@NgModule( {
    ...
    imports: [
        ...
        TranslateModule.forRoot( {
                loader: {
                    provide: TranslateLoader,
                    useFactory: (createTranslateLoader),
                    deps: [ Http ]
                }
            }
        ),
        ...

在我的一个产生此错误的页面中:

import {  TranslateModule, TranslateService, TranslatePipe } from '@ngx-translate/core';

@NgModule({
    imports: [
        TranslateModule
    ],
    exports: [
        TranslateModule
    ]
})
export class ContactPage { ... }

搜索SO主要产生了导入和提示的提示。导出页面中的TranslateModule以及导入TranslatePipe,但这两个更改都没有解决我的问题。如何配置翻译模块以使其在生产构建中工作?

1 个答案:

答案 0 :(得分:1)

好的,解决了。我添加了import&将TranslateModule的语句导出到页面类,但正确的是将其添加到相应的模块中。

在我的例子中:

错:

contact.ts

@NgModule({
    imports: [
        TranslateModule
    ],
    exports: [
        TranslateModule
    ]
})
export class ContactsPage {...}

正确:

contact.module.ts

@NgModule( {
    ...
    imports : [
        ...
        TranslateModule
    ],
    exports : [
        TranslateModule
    ]

} )
export class ContactsPageModule {
}