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

[hotequil]

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 : kubeflow/kubeflow#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.

[hotequil]

yes, me too...

[EliseiNicolae]

I added the HttpClientModule to my imports and works fine for me.
My versions are:
"@ngx-translate/core": "13.0.0",
"@ngx-translate/http-loader": "6.0.0",

🚀 Your app.module.ts must be like that:

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http);
}

@NgModule({
    declarations: [
        AppComponent,
        // TODO: Your components
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        TranslateModule.forRoot({
            defaultLanguage: 'en',
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    providers: [],
    bootstrap: [AppComponent]
})

[hotequil]

@EliseiNicolae, what is your Angular version?

[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"
}

[hotequil]

Thanks!

[aki-ks]

When importing the TranslateModule in NgModules other than your AppModule, you must use the TranslateModule.forChild() constructor.

@NgModule({
    imports: [
        TranslateModule.forChild(),
    ],
})
export class GlobalLoadingModule {}

[hotequil]

I'll close this issue because I back my Angular version.

[visurase]

ncaught SyntaxError: Cannot use import statement outside a module (at scripts.js:16887:1)
main.ts:13 Error: Unexpected value 'TranslateModule' imported by the module 'AppModule'. Please add an @NgModule annotation.
at verifySemanticsOfNgModuleDef (core.mjs:28868:5)
at core.mjs:28878:5
at Array.forEach ()
at verifySemanticsOfNgModuleDef (core.mjs:28876:43)
at AppModule.get (core.mjs:28833:23)
at getInjectorDef (core.mjs:333:1)
at walkProviderTree (core.mjs:5550:1)
at core.mjs:5500:6
at core.mjs:4701:1
at Array.forEach ()

 hi can someone please help me here i am facing same issue with angular version 17