错误：未捕获（承诺）：NullInjectorError：R3InjectorError（AppModule）[baseURL]答案

【问题标题】：Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[baseURL]错误：未捕获（承诺）：NullInjectorError：R3InjectorError（AppModule）[baseURL]
【发布时间】：2021-06-08 21:48:21
【问题描述】：

请帮助 .. 我被 Angular HTTP 困在这里
我正在尝试从 JSON 服务器获取 JSON 数据和图片
在 json-server 上使用 cmd 我运行 (json-server --watch db.json) ...然后 ==>

我的服务器结构

json-server 
    |
    |__ public (folder for assets)
    |      |__ images (folder for images)
    |
    |__ db.json (json database)

我有以下错误！！？

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[baseURL -> baseURL -> baseURL]: 
  NullInjectorError: No provider for baseURL!
get@http://localhost:4200/vendor.js:46512:27

... etc

dish.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { map } from 'rxjs/operators';
import { Dish } from '../shared/dish';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class DishService {
  constructor(private http: HttpClient) { }

  getDishes(): Observable<Dish[]> {
    return this.http.get<Dish[]>(baseURL + 'dishes');
  }

}

dish.ts（只是从 json 服务器获取数据的类）

import { Comment } from './comment';

export class Dish {
    id: string;
    name: string;
    image: string;
    category: string;
    featured: boolean;
    label: string;
    price: string;
    description: string;
    comments: Comment[];
}

共享文件夹 > baseurl.ts

export const baseURL = 'http://localhost:3000/';  // json server URL

menu.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
...
export class MenuComponent implements OnInit {
  dishes: Dish[];

  constructor(private dishService: DishService,
    @Inject('baseURL') private baseURL: string) { }

  ngOnInit() {
    this.dishService.getDishes().subscribe(dishes => this.dishes = dishes);
  }

menu.component.html

  <div fxFlex *ngIf="dishes">
    <mat-grid-list cols="2" rowHeight="200px">
      <mat-grid-tile *ngFor="let dish of dishes" [routerLink]="['/dishdetail', dish.id]">
        <img height="200px" src="{{ baseURL + dish.image }}" alt={{dish.name}}>
        <mat-grid-tile-footer>
          <h1>{{dish.name | uppercase}}</h1>
        </mat-grid-tile-footer>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { baseURL } from './shared/baseurl';
...
imports { HttpClientModule },
providers: [
  DishService,
  {provide: 'BaseURL', useValue: baseURL}
]

【问题讨论】：

标签： angular frontend angular-injector

【解决方案1】：

我找到了解决问题的方法，而且非常简单

在 menu.component.ts 中

改变这个

@Inject('baseURL') private baseURL: string

进入这个

@Inject('BaseURL') public BaseURL

【讨论】：