Angular 16 独立应用程序：NullInjectorError：没有 HttpClient 的提供程序

Question

我正在从头开始创建一个独立的应用程序，我没有 ngModule。

我正在创建一个翻译服务和一个使用它的管道。

在 app.component.ts 上测试它

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { I18nPipe } from './pipes/i18n.pipe';
import { I18nService } from './services/i18n.service';

@Component({
    selector: 'ct-v4',
    standalone: true,
    imports: [CommonModule, RouterOutlet, I18nPipe],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    title = 'ct-v4';
    constructor(private i18nService: I18nService) {}

    ngOnInit(): void {
        this.i18nService.initLanguage('en');
    }
}

我的国际化服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class I18nService {
    private translations: { [key: string]: string } = {};

    constructor(private http: HttpClient) {}

    initLanguage(lang: string, isFallback = false): void {
        this.http.get(`/langs/${lang}.json`).subscribe({
            next: (data: any) => {
                this.translations = data;
            },
            error: (error) => {
                console.error(`Language file for ${lang} not found.`);
                if (!isFallback) {
                    console.info('Falling back to default language: en');
                    this.initLanguage('en', true);
                } else {
                    console.error('Even the default language "en" is missing. Stopping language initialization.');
                }
            }
        });
    }

    i18n(key: string): string {
        return this.translations[key] || key;
    }
}

管道本身没有抱怨，因为它也是独立的，我收到此错误：

NullInjectorError: R3InjectorError(Standalone[AppComponent])[I18nService -> I18nService -> HttpClient -> HttpClient]: 
      NullInjectorError: No provider for HttpClient!

我没有在网上找到有关如何在独立角度应用程序中使用服务的示例

有任何想法吗？

Answer 1

您正在使用HttpClient服务，但不提供 HTTP 客户端。要修复它，请转到您的app.config.ts并添加provideHttpClient()到providers：

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient()],
}

如果您没有app.config.ts，请转到您的main.ts应用程序并在引导应用程序的位置添加以下内容：

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
  ],
});

有关更多信息，请参阅独立依赖项注入指南。