NullInjectorError: R3InjectorError(AppModule)[TranslateService -> TranslateService -> TranslateService]: NullInjectorError: No provider for TranslateService!

Current behavior

I have an Angular Library, it import TranslateModule in some shared modules, and i use this library at my principal application as a NPM dependency, in my AppModule at principal application, i import the TranslateModule.forRoot(Translate.configurations) with my configurations, my two applications compile correctly, but my translations at my library throws: NullInjectorError: R3InjectorError(AppModule)[TranslateService -> TranslateService -> TranslateService]: NullInjectorError: No provider for TranslateService! and the system stop. This starting happening when i update the Angular version, it was 11.2.11 and now is 12.1.4. I saw a lot of isues with this problem, but none helped me. In my application the versions is the same. The terminal compile OK.

Expected behavior

I expected the application translate my texts and no breaking.

How do you think that we should fix this?

I think that it’s just a incorrect import or something like.

A module at my Angular Library

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TranslateModule } from "@ngx-translate/core";

import { GlobalLoadingComponent } from "./global-loading.component";
import { ProgressSpinnerModule } from "../progress-spinner/progress-spinner.module";

@NgModule({
    declarations: [
        GlobalLoadingComponent
    ],
    imports: [
        CommonModule,
        TranslateModule,
        ProgressSpinnerModule
    ],
    exports: [
        GlobalLoadingComponent
    ]
})
export class GlobalLoadingModule{}

AppModule at my application

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

import { TranslateModule } from "@ngx-translate/core";
import { Translate, GlobalLoadingModule } from 'my-library';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        TranslateModule.forRoot(Translate.configurations),
        GlobalLoadingModule,
        // omitted imports
    ],
    exports: [],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {}

Browser:

• Chrome (desktop) version: 92.0.4515.107

For Tooling issues:

• Node version: 14.16.0
• NPM version: 6.14.11
• Angular version: 12.1.4
• ngx-translate/core version: 13.0.0
• ngx-translate/http-loader version: 6.0.0
• Platform: Ubuntu 20.04.2 LTS

[adeprez]

I’m facing the same issue. I moved to Angular 12 my library and the project using it, and now Translate service injection fails.

This is what I found so far : https://github.com/kubeflow/kubeflow/issues/6042

It looks like ngx-translate won’t be compatible with angular 13 nor angular 12 without ViewEngine. I couldn’t find any workaround and angular i18n doesn’t fit my needs so I will write my own translate pipe and translation service.

[EliseiNicolae]

@hotequil “dependencies”: { “@angular/animations”: “12.2.13”, “@angular/common”: “12.2.13”, “@angular/compiler”: “12.2.13”, “@angular/core”: “12.2.13”, “@angular/forms”: “12.2.13”, “@angular/platform-browser”: “12.2.13”, “@angular/platform-browser-dynamic”: “12.2.13”, “@angular/router”: “12.2.13”, “@ngx-translate/core”: “13.0.0”, “@ngx-translate/http-loader”: “6.0.0”, “rxjs”: “6.6.0”, “tslib”: “2.3.0”, “zone.js”: “0.11.4” }, “devDependencies”: { “@angular-devkit/build-angular”: “12.2.11”, “@angular/cli”: “12.2.11”, “@angular/compiler-cli”: “12.2.13”, “@types/jasmine”: “3.8.0”, “@types/node”: “12.11.1”, “jasmine-core”: “3.8.0”, “karma”: “6.3.0”, “karma-chrome-launcher”: “3.1.0”, “karma-coverage”: “2.0.3”, “karma-jasmine”: “4.0.0”, “karma-jasmine-html-reporter”: “1.7.0”, “typescript”: “4.3.5” }