Ошибка NullInjection в appModule: StaticInjectorError (AppModule) [BASE_URL]:

Question

Я очень плохо знаком с угловым и .net ядром.Я пишу код для выполнения операций CRUD.У меня есть следующий код в одном из моих компонентов проекта выборки.

import { Component } from '@angular/core';
import { ProjectDetailService } from '../services/projectdetail.service';
import { AllItProject } from '../../Models/allitproject';

@Component({
  selector: 'app-fetch-project',
  templateUrl: './fetch-project.component.html',
  styleUrls: ['./fetch-project.component.css']
})
export class FetchProjectComponent {

  public projectList: AllItProject[];

  constructor(private _projectService: ProjectDetailService) {
    this.getProjectDetails();
  }

  getProjectDetails() {
    this._projectService.getProjectDetails().subscribe(
      (data: AllItProject[]) => this.projectList = data
    );
  }

Мой компонент Projectdetail.service имеет следующий класс:

import { Injectable, Inject } from '@angular/core';
import { HttpClient, HttpInterceptor } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { AllItProject } from '../../models/allitproject';


@Injectable({
  providedIn: 'root'
})
export class ProjectDetailService {

  myAppUrl = '';

  constructor(private _http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this.myAppUrl = baseUrl;
  }

  getProjectDetails() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/Index').pipe(map(
      response => {
        return response;
      }));
  }

, когда я запускаю проект, я получаюВ левой части меню написано «Получить сотрудника».Когда я нажимаю на fetch-employee, я получаю сообщение об ошибке:

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[BASE_URL]: 
  StaticInjectorError(Platform: core)[BASE_URL]: 
    NullInjectorError: No provider for BASE_URL!
NullInjectorError: StaticInjectorError(AppModule)[BASE_URL]: 
  StaticInjectorError(Platform: core)[BASE_URL]: 
    NullInjectorError: No provider for BASE_URL!
    at NullInjector.get (vendor.js:39059)
    at resolveToken (vendor.js:53976)
    at tryResolveToken (vendor.js:53902)
    at StaticInjector.get (vendor.js:53752)
    at resolveToken (vendor.js:53976)
    at tryResolveToken (vendor.js:53902)
    at StaticInjector.get (vendor.js:53752)
    at resolveNgModuleDep (vendor.js:64939)
    at NgModuleRef_.get (vendor.js:66005)
    at injectInjectorOnly (vendor.js:38938)
    at resolvePromise (polyfills.js:4032)
    at resolvePromise (polyfills.js:3989)
    at polyfills.js:4093
    at ZoneDelegate.invokeTask (polyfills.js:3626)
    at Object.onInvokeTask (vendor.js:73266)
    at ZoneDelegate.invokeTask (polyfills.js:3625)
    at Zone.runTask (polyfills.js:3403)
    at drainMicroTaskQueue (polyfills.js:3794)
    at ZoneTask.invokeTask [as invoke] (polyfills.js:3704)
    at invokeTask (polyfills.js:4838)

Я пытался отладить свой код и когда я нажимал на пункт меню fetch employee.Я иду, чтобы получить конструктор компонента проекта, а затем захожу внутрь getProjectDetails () в компоненте проекта fetch, я получил ту же ошибку выше, что я упоминал выше.Ниже мой app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';

import { FetchProjectComponent } from './fetch-project/fetch-project.component';
import { AddProjectComponent } from './add-project/add-project.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    FetchProjectComponent,
    AddProjectComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot([

      { path: 'fetch-project', component: FetchProjectComponent },
      { path: 'register-project', component: AddProjectComponent },
      { path: 'project/edit/:id', component: AddProjectComponent },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ниже моя угловая структура приложения:

Я добавил это в свойФайл main.ts:

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

любая помощь будет высоко оценена.

Answer 1

Проблема должна быть здесь:

  constructor(private _http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
  this.myAppUrl = baseUrl;
}

Кажется, вы хотите использовать базовый URL в ваших запросах.Лучше всего установить эту переменную в окружении.Должно быть так:

environment.ts

export const environment = {
production: false
BASE_URL: 'http://localhost:3000'
};

Projectdetail.service.ts

import { environment } from '../environments';

export class ProjectDetailService {
  myAppUrl = environment.BASE_URL;

constructor(private _http: HttpClient) { }
...
}

Таким образом, вы можете установить несколько BASE_URL для любой среды, prod, homolog, dev .. и т.д ...

Answer 2

BASE_URL не существует в вашем случае.Если вы хотите такого - создайте сервис, который хранит его и добавьте к провайдерам.

providers: [
    { provide: 'BASE_URL', useFactory: getBaseUrl }
]

Укажите фабричный метод, который получает базовый URL из элемента:

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

И, очевидно, он должен быть у вас.в html:

<base href="/client1/" />

Хорошее описание: http://www.projectcodify.com/angular-set-base-url-dynamically