Link to child library module that uses TranslateModule throws runtime error ("no provider found for TranslateService")

[nirzamir]

I'm submitting a ... (check one with "x")

[ x ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior I have an application that has a dependency library (not lazy loaded). In my app.module I use .forRoot, and in the library module I import TranslateModule without forRoot - I want to use the same store/service that is initialized in app.module. In the library module I have a component using the translate pipe. Both projects (main application and the library) have @ngx-translate/core as dependency. When I run npm install both projects, all is working fine.

However, when I link to the library using npm link (and then @ngx-translate is in node_modules of both library and main app), I get a runtime error "No provider found for TranslateService!". Using .forChild (without any parameters) doesn't help. If I delete the @ngx-translate/core from the child's node_modules, it works!

Expected/desired behavior when using npm link to link to a child package that uses the same translate service instance (using forChild from the child module), the component in the child module will not throw a runtime error when using the translate pipe, and use the instance that was initialized by the main app (as it does without link)

Reproduction of the problem

1. in app.module, import TranslateModule with .forRoot
2. in a dependency library, create a component whose module imports TranslateModule
3. in the component's template, use the translate pipe.
4. in the main app project, use npm link to link to the dependency package --> notice that in the app node_modules/{library}/node_modules, the package now has another instance of @ngx-translate/core
5. run your app and you'll get a runtime error from the component: no provider for TranslateService!
6. if you delete node_modules/{library}/node_modules/@ngx-translate, the issue disappears.

What is the expected behavior? See above

What is the motivation / use case for changing the behavior? as a developer, I need to link to the library in order to develop it when in the application. I can use @ngx-translate as a peer dependency for example, but if @ngx-translate/core won't be installed in my library, it won't build and can't run my tests. If I install it for development, I can't run the application...

Please tell us about your environment:

• ngx-translate version: 7.2.0

• Angular version: 4.1

• Browser: all

[petarblazevski]

I am having the same issue. Did you find any solution for this problem?

[Collaborator12]

I am having same issue ! Can anyone please help ?

[dlarr]

Any luck with this ? I am facing same kind of issue.

I made a component that I publish into my verdaccio : It's using | translate so I need to include the TranslateModule in it:

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

@NgModule({
    imports: [
      MdTableModule,
      MdTooltipModule,
      MdAutocompleteModule,
      MdPaginatorModule,
      MdSelectModule,
      MdSortModule,
      MdInputModule,
      MdSelectModule,
      CdkTableModule,

      HttpClientModule,
      ReactiveFormsModule,
      CommonModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
        }
      }),
      FormsModule
    ],
    exports: [ComplexTableComponent],
    declarations: [ComplexTableComponent],
    providers: [

    ]
})
export class ComplexTableModule { }

But then, Translation won't work in the project where I did [npm install myModule]

[dstanich]

I had a similar issue using npm link and resolved it using the method here: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/linked-library.md

In the main project's tsconfig.json, I added an entry for @ngx-translate/* which pointed to the main project's version.

"@ngx-translate/*": [ "../node_modules/@ngx-translate/*" ],

[JustDoItSascha]

@dstanich Hey! Could you help us and say what exactly have you done? Because your link is not working anymore :(

We have the exact same issue today with newest versions of angular and ngx-translate.

[dstanich]

@JustDoItSascha I no longer work in that code base where I had the problem, so I'm not sure if the solution still works in the latest versions. But here is an old link to the angular-cli document I referenced. Good luck!

https://github.com/angular/angular-cli/blob/v1.7.2/docs/documentation/stories/linked-library.md

[paulweimer]

I had a similar issue using npm link and resolved it using the method here: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/linked-library.md

In the main project's tsconfig.json, I added an entry for @ngx-translate/* which pointed to the main project's version.

"@ngx-translate/*": [ "../node_modules/@ngx-translate/*" ],

Thanks a lot, this was exactly what I was searching for and helped me solving the issue in my shared angular library which I've integrated as a git submodule:

"paths": {
  "@ngx-translate/*": [
    "./node_modules/@ngx-translate/*"
   ],
},