Angular4 - ZoneAwareError

Question

I'm suddenly seeing an error when I try to run an Angular4 that looks like this...

ERROR ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error
Error
at Error.ZoneAwareError (http://localhost:4200/vendor.……}message: (...)name: (...)originalStack: (...)promise: ZoneAwarePromiserejection: Errorstack: (...)task: ZoneTasktoSource: function ()toString: function ()zone: ZonezoneAwareStack: (...)__zone_symbol__error: Error: Uncaught (in promise): 
Error
Error
at Error.ZoneAwareError (http://localhost:4200/vendor.bundle.js:97291:33)
at ZoneAwareError (http://localhost:4200/vendor.bundle.js:97288:35)
at injectionError (http://localhost:4200/vendor.bundle.js:2061:86)
at noProviderError (http://localhost:4200/vendor.bundle.js:2099:12)
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:3601:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:3640:25)
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:3572:25)
at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:3441:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:4200/vendor.bundle.js:4406:52)
at resolveDep (http://localhost:4200/vendor.bundle.js:11810:45)
at createClass (http://localhost:4200/vendor.bundle.js:11673:147)
at createDirectiveInstance (http://localhost:4200/vendor.bundle.js:11504:37)
at createViewNodes (http://localhost:4200/vendor.bundle.js:12853:49)
at createRootView (http://localhost:4200/vendor.bundle.js:12758:5)
at callWithDebugContext (http://localhost:4200/vendor.bundle.js:13889:42)
at Error.ZoneAwareError (http://localhost:4200/vendor.bundle.js:97291:33)
at ZoneAwareError (http://localhost:4200/vendor.bundle.js:97288:35)
at injectionError (http://localhost:4200/vendor.bundle.js:2061:86)
at noProviderError (http://localhost:4200/vendor.bundle.js:2099:12)
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:3601:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:3640:25)
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:3572:25)
at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:3441:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:4200/vendor.bundle.js:4406:52)
at resolveDep (http://localhost:4200/vendor.bundle.js:11810:45)
at createClass (http://localhost:4200/vendor.bundle.js:11673:147)
at createDirectiveInstance (http://localhost:4200/vendor.bundle.js:11504:37)
at createViewNodes (http://localhost:4200/vendor.bundle.js:12853:49)
at createRootView (http://localhost:4200/vendor.bundle.js:12758:5)
at callWithDebugContext (http://localhost:4200/vendor.bundle.js:13889:42)
at resolvePromise (http://localhost:4200/vendor.bundle.js:96964:31) [angular]
at resolvePromise (http://localhost:4200/vendor.bundle.js:96935:17) [angular]
at http://localhost:4200/vendor.bundle.js:97012:17 [angular]
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4965:37) [angular]
at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:96665:36) [angular]
at Zone.runTask (http://localhost:4200/vendor.bundle.js:96465:47) [<root> => angular]
at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:96845:35) 
[<root>]
at HTMLAnchorElement.ZoneTask.invoke 
(http://localhost:4200/vendor.bundle.js:96723:25) [<root>]get message: function ()set message: function (value)get name: function ()set name: function (value)get originalStack: function ()set originalStack: function (value)get stack: function ()set stack: function (value)get zoneAwareStack: function ()set 
zoneAwareStack: function (value)__proto__: Object
defaultErrorLogger @ core.es5.js:1085
ErrorHandler.handleError @ core.es5.js:1145
next @ core.es5.js:4774
schedulerFn @ core.es5.js:3848
SafeSubscriber.__tryOrUnsub @ Subscriber.js:234
SafeSubscriber.next @ Subscriber.js:183
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3834
NgZone.triggerError @ core.es5.js:4205
onHandleError @ core.es5.js:4166
ZoneDelegate.handleError @ zone.js:338
Zone.runGuarded @ zone.js:142
_loop_1 @ zone.js:557
drainMicroTaskQueue @ zone.js:566
ZoneTask.invoke @ zone.js:424

I can't figure out what part of my code is creating this as other parts of the app continue to work fine. When I try to roll back my code to a pre-error version, I'm still getting the error. The error is so vague, I have no idea what file or part of the file is causing the error.

Anyone have any ideas on how to start looking for this ?

UPDATE: The error appears to be when I import a service into a component. Here is the code for a dashboard component that imports and uses a service. if I remove this from the dashboard component constructor...

private CaseService: CaseService

The error dissapears. Here is the dashboard component...

import {Component} from '@angular/core'
import {Router,ActivatedRoute} from '@angular/router'

import {Globals} from '../../models/globals.model'
import {CaseService} from '../../services/case.service'

@Component({
    templateUrl: 'dashboard.html'
})

export class DatabaseDashboard{

    constructor(private Globals: Globals, private Router: Router, private CaseService: CaseService){     


   if(this.Globals.CurrentUser.IsLoggedIn !== true){
        this.Router.navigateByUrl('/login')
   }

   let PackageAuthorised = false
   Globals.CurrentUser.Packages.forEach(Package => {
       if(Package.PackageID == 1){ // 1 = Database Package in packages table
           PackageAuthorised = true
       }
   });

   if(PackageAuthorised === false){
        this.Router.navigateByUrl('/login')
   }


   this.CaseService.getAllCasesByUserid().subscribe(
    data => {                
        console.log(data)
        if(data != null){
            this.Globals.Cases = data                   
        } else {
            alert("Failed to fetch Cases from Database")
        }
    })


    }

}

...and here is the service...

import {Component} from '@angular/core'
import {Http,Headers, RequestOptions,URLSearchParams  } from '@angular/http'

import 'rxjs/Rx'
import { Observable } from 'rxjs/Observable'

import {Settings} from '../models/settings.model'
import {Globals} from '../models/globals.model'
import {Case} from '../models/case.model'

@Component({ 

})

export class CaseService {

constructor(private _http: Http, private Settings: Settings, private Globals: Globals) { 

}

getAllCases(){    
    console.log(this.Settings.ApiURL + 'cases.php?Method=getAllCases&AdminEmail=' + this.Globals.CurrentUser.UserEmail + '&AdminPassword=' + this.Globals.CurrentUser.UserPassword)
    return this._http.get(this.Settings.ApiURL + 'cases.php?Method=getAllCases&AdminEmail=' + this.Globals.CurrentUser.UserEmail + '&AdminPassword=' + this.Globals.CurrentUser.UserPassword).map(
        result => {                
            let data = result.json()
            console.log(data)
            return data
        }
    )               
}


getAllCasesByUserid(){    
    console.log(this.Settings.ApiURL + 'cases.php?Method=getAllCasesByUserid&UserID=1&UserEmail=' + this.Globals.CurrentUser.UserEmail + '&UserPassword=' + this.Globals.CurrentUser.UserPassword)
    return this._http.get(this.Settings.ApiURL + 'cases.php?Method=getAllCasesByUserid&UserID=1&UserEmail=' + this.Globals.CurrentUser.UserEmail + '&UserPassword=' + this.Globals.CurrentUser.UserPassword).map(
        result => {  
            console.log(result)              
            let data = result.json()                
            return data
        }
    )               
}

deleteCase(CaseID: number){
     console.log(this.Settings.ApiURL + 'cases.php?Method=deleteCase&UserEmail=' + this.Globals.CurrentUser.UserEmail + '&UserPassword=' + this.Globals.CurrentUser.UserPassword + '&CaseID=' + CaseID )

    return this._http.get(this.Settings.ApiURL + 'cases.php?Method=deleteCase&UserEmail=' + this.Globals.CurrentUser.UserEmail + '&UserPassword=' + this.Globals.CurrentUser.UserPassword + '&CaseID=' + CaseID ).map(
        result => {
            let data = result.json()
            return data
        }
    ) 
}

saveNewCase(Case: Case){
    console.log(this.Settings.ApiURL + 'cases.php?Method=saveNewCase&UserEmail=' + this.Globals.CurrentUser.UserEmail + '&UserPassword=' + this.Globals.CurrentUser.UserPassword + '&CaseUniqueCode=' + Case.CaseUniqueCode + '&CaseTitle=' + Case.CaseTitle  + '&CreatorUserid=' + Case.CreatorUserid + '&CaseBriefDesc=' + Case.CaseBriefDesc)

    return this._http.get(this.Settings.ApiURL + 'cases.php?Method=saveNewCase&UserEmail=' + this.Globals.CurrentUser.UserEmail + '&UserPassword=' + this.Globals.CurrentUser.UserPassword + '&CaseUniqueCode=' + Case.CaseUniqueCode + '&CaseTitle=' + Case.CaseTitle  + '&CreatorUserid=' + Case.CreatorUserid + '&CaseBriefDesc=' + Case.CaseBriefDesc).map(
        result => {
            let data = result.json()
            return data
        }
    ) 
}

updateCase(Case: Case){
    console.log(this.Settings.ApiURL + 'cases.php?Method=updateCase&UserEmail=' + this.Globals.CurrentUser.UserEmail + '&UserPassword=' + this.Globals.CurrentUser.UserPassword + '&CaseID=' + Case.CaseID + '&CaseUniqueCode=' + Case.CaseUniqueCode + '&CaseTitle=' + Case.CaseTitle  + '&CreatorUserid=' + Case.CreatorUserid + '&CaseBriefDesc=' + Case.CaseBriefDesc)

    return this._http.get(this.Settings.ApiURL + 'cases.php?Method=updateCase&UserEmail=' + this.Globals.CurrentUser.UserEmail + '&UserPassword=' + this.Globals.CurrentUser.UserPassword + '&CaseID=' + Case.CaseID + '&CaseUniqueCode=' + Case.CaseUniqueCode + '&CaseTitle=' + Case.CaseTitle  + '&CreatorUserid=' + Case.CreatorUserid + '&CaseBriefDesc=' + Case.CaseBriefDesc).map(
        result => {
            let data = result.json()
            return data
        }
    ) 
}



}

Expanded error...

defaultErrorLogger  @   core.es5.js:1085
ErrorHandler.handleError    @   core.es5.js:1145
next    @   core.es5.js:4774
schedulerFn @   core.es5.js:3848
SafeSubscriber.__tryOrUnsub @   Subscriber.js:234
SafeSubscriber.next @   Subscriber.js:183
Subscriber._next    @   Subscriber.js:125
Subscriber.next @   Subscriber.js:89
Subject.next    @   Subject.js:55
EventEmitter.emit   @   core.es5.js:3834
NgZone.triggerError @   core.es5.js:4205
onHandleError   @   core.es5.js:4166
ZoneDelegate.handleError    @   zone.js:338
Zone.runGuarded @   zone.js:142
_loop_1 @   zone.js:557
drainMicroTaskQueue @   zone.js:566
ZoneTask.invoke @   zone.js:424

message: (...)name: (...)originalStack: (...) click on ... after originStack — yurzui
– yurzui, Commented Mar 30, 2017 at 4:28
I guess the Error is Due to Service not Provided as pointed by @VinayPrabhakaran — Rahul Singh
– Rahul Singh, Commented Mar 30, 2017 at 4:43
Yep...didn't add Service to Providers list in app.module.ts . Thanks everyone...Wish the error was more intuitive...maybe in Angular 5 eh ? Does Vinay or Rahul want to post an answer and I'll mark it as correct answer ? That way you get the kudos :) — Craig
– Craig, Commented Mar 30, 2017 at 4:59

Vinay Prabhakaran · Accepted Answer · 2017-03-30 05:10:49Z

7

Sure i wouldn't mind getting some points :). Please include the service CaseService in the providers section of app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [CaseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

answered Mar 30, 2017 at 5:10

Vinay Prabhakaran

7731 gold badge6 silver badges18 bronze badges

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

1 Comment

Craig Over a year ago

As a side note, thanks Vinay, you could also declare the providers inside the component itself.

Collectives™ on Stack Overflow

Angular4 - ZoneAwareError

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related