angular - 错误 : Unexpected value 'Http' imported by the module 'AppModule' at SyntaxError. ZoneAwareError

Question

我已经多次检查我的代码并尝试在网络和 stackoverflow 上找到类似的问题，但我现在已经没有想法了，我根本看不出我的错误。您对我接下来应该检查的内容有什么建议吗？

更新:当我调试我的配置类时，我可以看到，我的 json-Configurations 文件被读取并且值在 App-Initialize 上正确地存储到我的配置变量中(参见 load()-function of app.config.ts在 plnkr 上)。 但是如果我想从这个配置变量中取回值，例如“werkzeug.service.ts”的第 39 行

let host:string = this.config.getConfig('host');

出现如下错误:

TypeError: Cannot read property 'host' of null
    at AppConfig.getConfig (http://localhost:3000/app/app.config.js:31:27)
    at WerkzeugService.getSollIstWerkzeugBySchrankAndAnsicht (http://localhost:3000/app/werkzeug.service.js:47:32)
    at AppComponent.ngAfterViewInit (http://localhost:3000/app/app.component.js:37:30)
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:44:71)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12206:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12353:48)
    at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9375:24)
    at eval (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8299:71)
    at Array.forEach (native)
    at ApplicationRef_.tick (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8299:29)
    at ApplicationRef_._loadComponent (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8274:18)
    at ApplicationRef_.bootstrap (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8262:18)
    at eval (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8091:93)
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap 

这是我的项目设置:http://plnkr.co/edit/QsaOtnqFr0Ky9Qwz21SP?p=preview

Answer 1

HttpModule 应该在 imports 中，但 Http 不应该。

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule, HttpModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ AppConfig, { provide: APP_INITIALIZER, useFactory: initConfig, deps: [AppConfig], multi: true }]  
})

示例 http.get 插件:http://plnkr.co/edit/60E2qb9gOjvkEAeR5CtE?p=info