“没有 TranslateService 提供者”错误以某种方式连接到 npm install

Question

使用 我的 Angular+Webpack+JHipster+yarn 项目我收到以下错误。然后我删除

node_modules

并运行“npm install”，它就消失了。然后我做这做那，结果又回来了。怎么会？我不想这样做。错误中列出的 TranslateService 是由库提供的，而不是我自己的，并且在我未编写的项目的三个生成的组件中使用。

ERROR Error: No provider for TranslateService!
    at injectionError (vendor.dll.js:1659)
    at noProviderError (vendor.dll.js:1697)
    at ReflectiveInjector_._throwOrNull (vendor.dll.js:3198)
    at ReflectiveInjector_._getByKeyDefault (vendor.dll.js:3237)
    at ReflectiveInjector_._getByKey (vendor.dll.js:3169)
    at ReflectiveInjector_.get (vendor.dll.js:3038)
    at GreatBigExampleApplicationAppModuleInjector.get (ng:///GreatBigExampleApplicationAppModule/module.ngfactory.js:515)
    at GreatBigExampleApplicationAppModuleInjector.getInternal (ng:///GreatBigExampleApplicationAppModule/module.ngfactory.js:2452)
    at GreatBigExampleApplicationAppModuleInjector.NgModuleInjector.get (vendor.dll.js:4005)
    at resolveDep (vendor.dll.js:11467)

Answer 1

如 ngx-translate 的 github 上记录的 ：

您必须在应用程序的根 NgModule 中导入 TranslateModule.forRoot()。

app.module.ts：

@NgModule({
  imports: [
    //...
    TranslateModule.forRoot(),
  ],
  //...
})

或者如果您使用的是

SharedModule

:

如果您使用在多个其他功能模块中导入的 SharedModule，则可以导出 TranslateModule 以确保不必在每个模块中导入它

@NgModule({
  exports: [
    //...
    TranslateModule,
  ],
  //...
})

Answer 2

我不是 100% 确定是什么造成的，但我删除了yarn.lock，更正了节点版本差异，更新了

node_modules

，现在似乎已修复。我的

pom.xml

有节点 6.11.0，但我一直使用 6.10.3 来安装软件包和运行东西。

更新： 刮掉那个。问题又回来了。它是在更改node_modules/下的源文件后启动的。在撤销更改后...在删除yarn.lock后...在删除target/后...在完全重新安装所有节点模块后...在签出主分支后仍然存在。最后，在重新安装所有节点模块之后，它再次工作。

我不知道发生了什么。

Answer 3

或者你必须直接导出

TranslateModule

中的

app.module.ts

而不使用SharedModule，如下所示：

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



@NgModule({
  declarations: [
    AppComponent,
    //..
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    //..
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient]
      }
    }),
  ],
  exports: [TranslateModule],
  providers: [Title, HttpClient, HttpClientModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

// AOT compilation support
export function httpTranslateLoader(http: HttpClient):any {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

Answer 4

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

import { AppRoutingModule } from './app-routing.modu`enter code here`le';
import { AppComponent } from './app.component';
import {  HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage : 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient]
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


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