core: ng-packagr with npm pack gives a Error: No provider for TranslateService!

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 developed a library with the ng-packagr I use npm pack to package the library in a tarball and then I install it in another client app. The idea is that in my library I use ngx-translate but its in the client app where I provide the translations and the configuration of ngx-translate. The problem is that after doing and npm pack and installing the library I have a Error: No provider for TranslateService!

Expected/desired behavior To be able to translate in the library by configuring and providing translations in the client of the library.

Reproduction of the problem I have created a repo to demostrate what I’m talking about.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 39

Most upvoted comments

Hi Ovidio,

I really should read the official angular.io docs first. It works now with forRoot() in your shared module which injects your service there. Also you dont need to provide it TranslateService in your parent app since the providers in class export take care of it.

So now it looks like this.

footer.module.ts

import {ModuleWithProviders, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from './footer.component';
import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
import {WindowRefService} from '../service/window-ref/window-ref.service';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {BrowserModule} from '@angular/platform-browser';

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

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader) ,
        deps: [HttpClient],
      },
    }),
  ],
  declarations: [FooterComponent],
  providers: [WindowRefService],
  exports: [FooterComponent]
})
export class FooterModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: FooterModule,
      providers: [TranslateService]
    };
  }
}

app.module.ts

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


import {AppComponent} from './app.component';
import {FooterModule} from 'lib-playground';
import {HttpClient} from '@angular/common/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {TranslateModule} from '@ngx-translate/core';

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    FooterModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
}

For the angular.io docs, which maybe helps: https://angular.io/guide/ngmodule#why-userservice-isnt-shared https://angular.io/guide/ngmodule-faq#q-why-bad and onwards

dkabul on Nov 27, 2017

https://github.com/dherges/ng-packagr/issues/259 solved the issue for me

Arikael on Dec 14, 2017

Hi Ovidio,

Im still trying to put it on the right way now. Im on the same ship. Ill give you an update if I got it right

dkabul on Nov 27, 2017