Angular4 - ZoneAwareError

时间：2017-03-30 03:47:55

标签： angular angular4

当我尝试运行看起来像这样的Angular4时，我突然发现错误... 

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

我无法弄清楚我的代码的哪一部分正在创建此应用程序的其他部分继续正常工作。当我尝试将我的代码回滚到错误前版本时，我仍然收到错误。错误是如此模糊，我不知道文件或文件的哪一部分导致错误。

任何人对如何开始寻找这个有任何想法？

更新：将服务导入组件时出现错误。以下是导入和使用服务的仪表板组件的代码。如果我从仪表板组件构造函数中删除它... 

private CaseService: CaseService

错误消失了。这是仪表板组件...... 

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")
        }
    })


    }

}

......这是服务...... 

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
        }
    ) 
}



}

扩大错误...... 

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

1 个答案:

答案 0 :(得分：6)

当然，我不介意得到一些分数:)。 请在app.module.ts

的providers部分中包含服务CaseService 
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 { }
相关问题
最新问题