Angular 8：错误：未捕获（承诺）：NullInjectorError：StaticInjectorError(AppModule)

Question

I have an angular 8 app, where I am getting the following error :

core.js:4002 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[ScreenComponent -> MetadataUtil]: 
  StaticInjectorError(Platform: core)[ScreenComponent -> MetadataUtil]: 
    NullInjectorError: No provider for MetadataUtil!
NullInjectorError: StaticInjectorError(AppModule)[ScreenComponent -> MetadataUtil]: 
  StaticInjectorError(Platform: core)[ScreenComponent -> MetadataUtil]: 
    NullInjectorError: No provider for MetadataUtil!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:725)
    at resolveToken (core.js:11918)
    at tryResolveToken (core.js:11862)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:11764)
    at resolveToken (core.js:11918)
    at tryResolveToken (core.js:11862)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:11764)
    at resolveNgModuleDep (core.js:20234)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20905)
    at injectInjectorOnly (core.js:628)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:26247)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1693)

The following is the code:

MetadataUtil.ts

export class MetadataUtil {

    constructor(
        private http: HttpClient,
        private httpCache: HttpCacheService
    ) { }

    postData() {
       //...
    }
}
ScreenComponent.ts

import { MetadataUtil } from './MetadataUtil.ts';


@Component({
    selector: 'comp1',
    templateUrl: `./comp1.component.html`,
    styleUrls: ['./comp1.component.scss']
    , encapsulation: ViewEncapsulation.None
})
@Injectable({
    providedIn: 'root'
})

@NgModule({
    imports: [SharedModule, AngularBootstrapToastsModule]
})

export class ScreenComponent implements OnInit {
    constructor(
        private metadata: MetadataUtil
    ) { }
    
    getData(){
       this.metadata.postData();

    } 

}

So postData method in the MetadataUtil.ts file was static earlier and the ScreenComponent was using it as an import. I changed it not to be static and changed the reference in the ScreenComponent, and. this error started coming up. I've seen similar posts online and people suggesting solutions for this, But I have not been able to understand what this error is about and why this might have been thrown. Could somebody explain me what this error is please? Thanks

Answer 1

According to latest versions you should use HttpClientModule instead of HttpModule

Import like this

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [ ],
  imports: [
    ......
    HttpClientModule
  ]
....