使用@ngx translate/core和Angular 5应用程序时出错

当我尝试使用Visual Studio 2017 SPA模板的Angular应用程序（运行v5）上的

@ngx translate/core

应用程序时，出现以下错误

aspnet prerendering

在应用程序上被关闭，即index.cshtml被关闭

因此，我的package.json中包含以下内容（所有角度引用都是^5.0.0）

然后，我的app.browser.module.ts中有以下内容：

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
        AppModuleShared
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})

在我的app.component.ts中，我有

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

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
    }

    switchLanguage(language: string) {
        this.translate.use(language);
    }
}

最后，我在我的组件中调用我的翻译

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

@Component({
    selector: 'hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css']
})
export class HeroComponent {
    constructor(translate: TranslateService) {

    }
}

在hero.component.html中，我有
{{{'hero.Intro'| translate}}

然而，当我运行时，我得到以下错误

Uncaught Error: Template parse errors:
The pipe 'translate' could not be found ("<div class="hero mh-100">
    <h1 class="display-4"> {{ [ERROR ->]'Hero.Intro' | translate }}</h1>

未捕获错误：模板分析错误：
找不到管道“translate”（“
{{[ERROR->]'Hero.Intro'| translate}
应用程序模块.ts（角度5.2）

创建工厂：

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

在TranslateModule中使用

imports: [
  //imports
  TranslateModule.forRoot({
    loader: {
     provide: TranslateLoader,
     useFactory: (createTranslateLoader),
     deps: [HttpClient]
    }
  })
]

和/src/assets/i18n中的文件/

en.json

ru.json

en.json文件的结构

{
  "phrase1": "Hello",
  "phrase2": "World"
}

{
  "phrase1": "Привет",
  "phrase2": "Мир"
}

ru.json文件

{
  "phrase1": "Hello",
  "phrase2": "World"
}

{
  "phrase1": "Привет",
  "phrase2": "Мир"
}

在app.component.ts构造函数中，服务必须是公共的：

constructor(public translate: TranslateService){}

ngOnInit() {
    this.translate.addLangs(["en", "ru"]);
    this.translate.setDefaultLang('en');

    let browserLang = this.translate.getBrowserLang();
    if (browserLang.match( /ru/ )) {
      this.translate.use( 'ru' );
    }
    else if (browserLang.match( /en/ )) {
      this.translate.use( 'en' );
    } else {
      this.translate.use( 'en' );
    }
}

在模板中：

<p>{{ 'phrase1' | translate }}</p>
<p>{{ 'phrase2' | translate }}</p>

{{'phrase1'| translate}

{{'phrase2'| translate}}

我尝试在app.component.ts中将
private
修改为
public
，但我仍然收到相同的错误？尝试在HeroComponent中进行更改是的，它也在这里。我还尝试移动
{Hero.Intro | translate}
tot the app.component.ts和.html，我也收到了同样的错误。你能提供你的json吗？也许，你没有一个带有属性Intro的json对象Hero，你可以从{{{Hero.Intro'| translate}改为{{Intro'| translate}