Канал углового перевода не работает и не может получить данные из JSON - PullRequest
Новая
       13

Канал углового перевода не работает и не может получить данные из JSON

1 голос
/ 24 июня 2019

В моем угловом приложении один модуль называется RecipeModule. В этом модуле я пытаюсь использовать translate pipe, но Pipe не работает. Я видел много постов на stackoverflow с похожей ситуацией, но это не сработало для меня.

Мой app.module.ts выглядит следующим образом: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

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

import { AppComponent } from './app.component';
import { AttractorComponent } from './attractor/attractor.component';
import { HeaderComponent } from './header/header.component';
import { ErrorComponent } from './error/error.component';

// NG Translate
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { NgxElectronModule } from 'ngx-electron';
//import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { HttpModule } from '@angular/http';
import { RecipeModule} from './recipe/recipe.module';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/locale/', '.json');
}

@NgModule({
  declarations: [
    AppComponent,
    AttractorComponent,
    HeaderComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    HttpModule ,
    AppRoutingModule,
    HttpClientModule,
    NgxElectronModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    RecipeModule

  //  StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })
  ],
  providers: [TranslateService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts выглядит следующим образом: 

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent {


  constructor(private translate: TranslateService) {
    this.translate.setDefaultLang('en');
  }

  ngOnInit() {

  }

}

recipe.module.ts выглядит следующим образом: 

import { NgModule } from '@angular/core';
import { RecipeDetailsComponent } from './recipe-details/recipe-details.component';
import { RecipeSearchComponent } from './recipe-search/recipe-search.component';
import { Router, RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { SharedModule } from '../shared/shared.module';

export const RECIPE_ROUTES = [
    { path: 'recipe/search', component: RecipeSearchComponent },
    { path: 'recipe/details', component: RecipeDetailsComponent } 
];

@NgModule({
    declarations:[RecipeDetailsComponent, RecipeSearchComponent],
    imports: [RouterModule.forChild(RECIPE_ROUTES), TranslateModule, SharedModule]
})

export class RecipeModule{}

recipe-search.component.htmls выглядит следующим образом: 

<div class="container">
  <h1 class="title">
    {{ 'SCREENS.SEARCH.TITLES' | translate }}
  </h1>
</div>
<p>recipe search screen</p>

Мой en.json выглядит следующим образом: 

{
    "SCREENS": {
        "SEARCH": {
            "TITLE": "Recipe Search works"
        },        
        "DETAILS": {
            "TITLE": "Recipe Details works!"
        }
   }
}

Мой общий модуль выглядит следующим образом: 

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




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

В графическом интерфейсе я получаю текст из текста абзаца на экране, то есть на экране поиска рецептов, но я не могу получить данные из en.json с помощью файла перевода. Я не получаю никаких ошибок, но все еще данные от json не видны. Пожалуйста, помогите

1 Ответ

0 голосов
/ 10 июля 2019

Подобный вопрос задают много раз в stackoverflow, и многие предлагают использовать общие модули для решения этой проблемы. Но согласно угловым официальным документам общие модули предназначены для оптимизации угловых приложений и повышения производительности, так как с помощью общих модулей мы идем для ленивой загрузки угловых компонентов.

Для меня проблема была не с переводчиком, это была незначительная ошибка в html-странице.

...