.NetCore 2 Angular 5-错误:StaticInjectorError(AppModule)[BASE_URL]: [英] .NetCore 2 Angular 5 - Error: StaticInjectorError(AppModule)[BASE_URL]:

问题描述

当我尝试导航到WebApi控制器时出现此错误.该错误是我在页面加载后立即得到的，因为代码位于构造函数中.

I get this error when i am trying to navigate to a WebApi Controller. This error is what i get as soon as the page loads because the codes are situated in the constructor function.

core.js:1598 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[BASE_URL]: 
  StaticInjectorError(Platform: core)[BASE_URL]: 
    NullInjectorError: No provider for BASE_URL!
Error: StaticInjectorError(AppModule)[BASE_URL]: 
  StaticInjectorError(Platform: core)[BASE_URL]: 
    NullInjectorError: No provider for BASE_URL!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveNgModuleDep (core.js:9217)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9911)
    at resolveDep (core.js:10276)
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveNgModuleDep (core.js:9217)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9911)
    at resolveDep (core.js:10276)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

login.component.ts

login.component.ts

import { Component, Inject } from '@angular/core';

import { NgForm } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';

import { Candidates } from '/Solutions/Angular/ExamBuddy/Interfaces/Candidate';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent  {
  candDetails: Candidates;

  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    var url = baseUrl + '/api/Candidate/ExamDetails/12345';
    this.http.get<Candidates>(url).subscribe(result => { this.candDetails = result; }, error => console.error(error));
  }

这也是我的app.module.ts代码.

This is also my app.module.ts code.

app.module.ts

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';

    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    import { FormsModule } from '@angular/forms';
    import { AppComponent } from './app.component';
    import { ExamComponent } from './exam/exam.component';
    import { LoginComponent } from './login/login.component';
    // import { RouterModule } from '@angular/router';
    import { InstructionComponent } from './instruction/instruction.component';
    import { routes } from './app.route';


    @NgModule({
      declarations: [
        AppComponent,
        ExamComponent,
        LoginComponent,
        InstructionComponent,

      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        routes 
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

我还具有WebApi控制器，该控制器连接到数据库并以JSON格式获取结果.

i also have the WebApi controller which connects to the database and fetches the result in JSON format.

推荐答案

您正在使用LoginComponent中的键BASE_URL和注入装饰器@Inject('BASE_URL') baseUrl: string注入字符串值.为此，您需要在AppModule中提供<​​c0>的值.但是您没有提供任何用处，这就是错误告诉您的内容:NullInjectorError: No provider for BASE_URL!

You are injecting a string value with the key BASE_URL in your LoginComponent, with the inject decorator: @Inject('BASE_URL') baseUrl: string. For this to work you need to provide a value for BASE_URL in your AppModule. But you didn't provide a vaule, this is what the error is telling you: NullInjectorError: No provider for BASE_URL!

在Angular 5中，建议创建InjectionToken例如

In Angular 5 it is recommended to create InjectionToken e.g.

import { InjectionToken } from '@angular/core';
export const BASE_URL = new InjectionToken<string>('BASE_URL');

通过在AppModule中定义提供程序来在AppModule中提供值:

providing the value in your AppModule is done by defining a provider in your AppModule:

providers: [  { provide: BASE_URL , useValue: "http://example.com/api" }

然后，您可以像下面这样在LoginLoginComponent中使用这个InjectionToken:

you can then use this InjectionToken in your LoginComponent like this:

constructor(private http: HttpClient, @Inject(BASE_URL) baseUrl: string) {

有关值注入的更多信息可以在官方文档中找到: https ://angular.io/guide/dependency-injection#dependency-injection-tokens

Further informations regarding injection of values can be found in the offical documentation: https://angular.io/guide/dependency-injection#dependency-injection-tokens

这篇关于.NetCore 2 Angular 5-错误:StaticInjectorError(AppModule)[BASE_URL]:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！