angular - appModule : StaticInjectorError(AppModule)[BASE_URL]: 中的 NullInjection 错误

Question

我对 Angular 和 .net Core 还很陌生。我正在编写代码来执行 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。当我点击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)

我尝试调试我的代码，当我点击获取员工菜单项时。我去获取项目组件构造函数，然后进入获取项目组件中的 getProjectDetails() ，我得到了与上面提到的相同的错误。下面是我的 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 { }

下面是我的 Angular 应用程序结构:

我在我的 main.ts 文件中添加了这个:

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

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

我们将不胜感激任何帮助。

Answer 1

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