Error: Unexpected value 'Http' imported by the module 'AppModule' at SyntaxError.ZoneAwareError

Question

I've checked my code several times and tried finding similar problems on the web and stackoverflow, but I'm out of ideas by now, I simply can't see my mistake. Do you have any recommendations what I should examine next?

UPDATE: When I debug my Configuration Class I can see, that my json-Configurations files are read and the values are stored into my configuration variables correctly on App-Initialize (see load()-function of app.config.ts on plnkr). BUT if I want to get the values back from this configuration varibales e.g. line 39 of "werkzeug.service.ts"

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

The following error appears:

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

Here is my project setup: http://plnkr.co/edit/QsaOtnqFr0Ky9Qwz21SP?p=preview

Despite the fact that you've changed your question completely.. You don't have a systemjs.config.js which you are trying to import in your index.html. You don't have your node_modules either. You can click new at the top left -> Angular -> 2.0.x to create a new plunker for your angular2 template and you don't need to write .js and .js.map files — eko
– eko, Commented Feb 21, 2017 at 16:05
I didn´t add node_modules, because it contains of many libraries which are laoded by npm. The .js and .js.map files are not handwritten but all generated. — anyones
– anyones, Commented Feb 23, 2017 at 14:00

eko · Accepted Answer · 2017-02-20 15:35:29Z

19

HttpModule should be in the imports but Http shouldn't be.

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

Example http.get Plunker: http://plnkr.co/edit/60E2qb9gOjvkEAeR5CtE?p=info

edited Feb 20, 2017 at 15:35

answered Feb 20, 2017 at 15:21

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

eko Over a year ago

@anyones HttpModule is still in providers in your question. And where does Http come from in your imports?

anyones Over a year ago

Alright, let me try without the HttpModule in providers. Why shouldn't it be there? The Http comes from import { HttpModule, Http } from '@angular/http'; Thanks for looking into it! UPDATE:Now I removed the HttpModule from providers, but I'm still getting the same error.

eko Over a year ago

@anyones you shouldn't import Http in your module. You should use it in your component/injectable. I don't know which tutorial you are using but please read the official documentation: angular.io/docs/ts/latest/guide/server-communication.html I will add an http plunker as an example to my question.

anyones Over a year ago

Ok, I fixed my problem. Now the serverConfig is in scope and I have access to the values in my service classes (WerkzeugService and SchrankService). The interessting code snippets are in main.ts (provide my server configuration on initPromise): And in app.components.ts (injecting the serverConfiguration and consign it to my both service classes): I updated plnkr so you can see the actual code. plnkr.co/edit/IawzlGDVYyUObJjxkDK8?p=preview @echonax: Thank you for your suggestions!

eko Over a year ago

@anyones glad you figured it out :-)

Collectives™ on Stack Overflow

Error: Unexpected value 'Http' imported by the module 'AppModule' at SyntaxError.ZoneAwareError

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related