Question

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule, Http } from '@angular/http';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    HttpModule,
    BrowserModule,
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

about.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

@IonicPage()
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})
export class AboutPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public translate: TranslateService) {
    this.translate.setDefaultLang('en');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AboutPage');
  }

}

about.html

<ion-header>

  <ion-navbar>
    <ion-title>{{ 'HELLO' | translate }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

错误：

错误：未捕获（在承诺中）：错误：模板解析错误：管道   ＆＃39;翻译＆＃39;无法找到（＆＃34;

      {{[ERROR - ＆gt;]＆＃39; HELLO＆＃39; |翻译}}

＆＃34;）：ng：///AboutPageModule/AboutPage.html@3：18错误：模板解析   错误：管道＆＃39;翻译＆＃39;无法找到（＆＃34;

      {{[ERROR - ＆gt;]＆＃39; HELLO＆＃39; |翻译}}

＆＃34;）：ng：///AboutPageModule/AboutPage.html@3:18       在syntaxError（http://localhost:8100/build/vendor.js:82250:34）       在TemplateParser.parse（http://localhost:8100/build/vendor.js:106433:19）       在JitCompiler._parseTemplate（http://localhost:8100/build/vendor.js:116386:37）       在JitCompiler._compileTemplate（http://localhost:8100/build/vendor.js:116361:23）       在http://localhost:8100/build/vendor.js:116262:62       在Set.forEach（）       在JitCompiler._compileComponents（http://localhost:8100/build/vendor.js:116262:19）       在http://localhost:8100/build/vendor.js:116132:19       at Object.then（http://localhost:8100/build/vendor.js:82239:77）       在JitCompiler._compileModuleAndComponents（http://localhost:8100/build/vendor.js:116131:26）       在c（http://localhost:8100/build/polyfills.js:3:19752）       在c（http://localhost:8100/build/polyfills.js:3:19461）       在http://localhost:8100/build/polyfills.js:3:20233       at t.invokeTask（http://localhost:8100/build/polyfills.js:3:15660）       at Object.onInvokeTask（http://localhost:8100/build/vendor.js:5114:33）       at t.invokeTask（http://localhost:8100/build/polyfills.js:3:15581）       在r.runTask（http://localhost:8100/build/polyfills.js:3:10834）       在o（http://localhost:8100/build/polyfills.js:3:7894）

相同的代码在root主页中像charm一样工作。 Plaease帮帮我怎样才能解决这个问题？

Answer 1

我猜您应该将TranslateModule添加到imports的{{1}}数组中：

AboutPageModule

如果你有共享模块，那么你可以在那里添加这个模块

@NgModule({
  imports: [
    ...,
    TranslateModule
  ],
  declarations: [AboutPage],
  ...
})
export class AboutPageModule {}

之后，以下内容也应该有效：

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

另见：

Angular 2 Use component from another module

Answer 2

有两件事，

（i）您还应在子模块中导入 TranslateModule 。

（ii）使用 HttpClientModule 代替 HttpModule

import { HttpClient, HttpClientModule } from "@angular/common/http"

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

Answer 3

不要忘记在TranslateModule中导出Pipe

Answer 4

我通过以下方式解决了相同的问题：

   TestBed.configureTestingModule({
      imports: [
        FormsModule,
        ReactiveFormsModule,
        PipesModule
      ],
   ....

在这里，“ PipesModule”是关键。

Angular Template解析错误：找不到管道

4 个答案: