"No provider for TranslateService" 错误以某种方式连接到 npm 安装

Question

我没有写的项目 my Angular+Webpack+JHipster+yarn project I get the following error. Then I delete node_modules and run 'npm install`, and it goes away. Then I do this and that and it comes back. How come? I'd like to not have to do that. The TranslateService listed in the error is one provided by a library, not one of my own, and is used in three generated components。

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

如documented on ngx-translate's github:

You have to import TranslateModule.forRoot() in the root NgModule of your application.

app.module.ts:

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

或者如果您使用的是 SharedModule:

If you use a SharedModule that you import in multiple other feature modules, you can export the TranslateModule to make sure you don't have to import it in every module

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

Answer 2

我不是 100% 确定是什么原因造成的，但我删除了 yarn.lock，更正了节点版本差异，更新了 node_modules，现在似乎已修复。我的 pom.xml 有节点 6.11.0，但我一直在使用 6.10.3 安装软件包和运行东西。

更新：从头开始。问题又回来了。它在更改 node_modules/ 下的源文件后启动。撤消更改后它仍然存在...删除 yarn.lock 后...删除目标/...完全重新安装所有节点模块后...检查主分支后。最后，在所有这些并重新安装所有节点模块之后，它再次运行。

不知道怎么回事

Answer 3

或者您必须在没有 SharedModule 的情况下直接在 app.module.ts 中导出 TranslateModule：

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');
}

"No provider for TranslateService" 错误以某种方式连接到 npm 安装

"No provider for TranslateService" error somehow connected to npm install

npm

jhipster

webpack

yarnpkg

angular