appModule 中的 NullInjection 错误：StaticInjectorError(AppModule)[BASE_URL]：

Question

我对 Angular 和 .net 核心非常陌生。我正在编写代码来执行 CRUD 操作。我的 fetch 项目组件之一中有以下代码。

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)

我尝试调试我的代码，当我点击获取员工菜单项时。我去获取项目组件构造函数，然后进入 fetch-project 组件中的 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 { }

下面是我的角度应用程序结构：

我在 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

Answer 2

问题应该出在这里：

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

您似乎想在请求中使用基本网址。最好的做法是在环境中设置该变量。 应该是这样的：

环境.ts

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

项目详细信息.service.ts

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

export class ProjectDetailService {
  myAppUrl = environment.BASE_URL;

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

通过这种方式，您可以为任何类型的环境、prod、homolog、dev.. 等设置多个 BASE_URL...

Answer 3

我认为您错过了将提供程序放在 platformBrowserDynamic 方法中。 以下代码是 main.ts 的示例，可用于注入 'BASE_URL'

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

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

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

if (environment.production) {    
    enableProdMode();
}

platformBrowserDynamic(providers).bootstrapModule(AppModule)
    .catch(err => console.error(err));

下面的代码是如何将它注入到组件或服务等的构造函数中。

  constructor(@Inject('BASE_URL') baseUrl: string) {
    
  }