angular 可以从 vscode 智能访问区域，但是 return 在 chrome 中 运行 时未定义
angular can access Zone from vscode intelligence ,but return undefined when run in chrome
当我尝试在我的 angular 应用程序的 ngOnInit 中使用 Zone 时，我在第 11 行设置了一个断点，我得到了函数 Zone(parent, zoneSpec){....}，但是 return 在 chrome 中开始时未定义？
这是我的代码：(https://stackblitz.com/edit/angular-c98byw)
export class AppComponent implements OnInit{
ngOnInit(): void {
// RootZone is ambient and it is
indistinguishable from no Zone.
console.dir(Zone)
let rootZone = Zone.current;
// We create a new zone by forking an
existing zone.
let zoneA = rootZone.fork({name: 'zoneA'});
// Each zone has a name for debugging
console.log(rootZone.name);
// (rootZone.name).toEqual('<root>');
// expect(zoneA.name).toEqual('zoneA');
// // Child zone knows about its parent zone.
(one way reference)
// expect(zoneA.parent).toBe(rootZone);
}
title = 'app';
@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
constructor(private zone:NgZone,
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>) {
}
在 vscode 中调试时：
我可以访问来自 vscode 的智能。
但是错误是从 chrome:
抛出的
AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'current' of undefined
at AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:12)
at checkAndUpdateDirectiveInline (core.js:9035)
at checkAndUpdateNodeInline (core.js:10299)
at checkAndUpdateNode (core.js:10261)
at debugCheckAndUpdateNode (core.js:10894)
at debugCheckDirectivesFn (core.js:10854)
at Object.eval [as updateDirectives] (AppComponent_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10846)
at checkAndUpdateView (core.js:10243)
at callWithDebugContext (core.js:11136)
View_AppComponent_Host_0 @ AppComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:10048
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11098
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1679
(anonymous) @ core.js:4524
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3719
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4524
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent @ core.js:4551
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap @ core.js:4493
(anonymous) @ core.js:4294
push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap @ core.js:4294
(anonymous) @ core.js:4260
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3760
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3751
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4289
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
AppComponent_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_Host_0 @ AppComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:10048
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11098
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1684
(anonymous) @ core.js:4524
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3719
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4524
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent @ core.js:4551
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap @ core.js:4493
(anonymous) @ core.js:4294
push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap @ core.js:4294
(anonymous) @ core.js:4260
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3760
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3751
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4289
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
core.js:3077 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
您需要指定它在 window 对象上。
如果您改用 console.dir(window["Zone"])，您会看到函数按预期记录到控制台
或者，您可以将 let Zone = window["Zone"] 添加到 ngOnInit
的第一行
当我尝试在我的 angular 应用程序的 ngOnInit 中使用 Zone 时，我在第 11 行设置了一个断点，我得到了函数 Zone(parent, zoneSpec){....}，但是 return 在 chrome 中开始时未定义？ 这是我的代码：(https://stackblitz.com/edit/angular-c98byw)
export class AppComponent implements OnInit{
ngOnInit(): void {
// RootZone is ambient and it is
indistinguishable from no Zone.
console.dir(Zone)
let rootZone = Zone.current;
// We create a new zone by forking an
existing zone.
let zoneA = rootZone.fork({name: 'zoneA'});
// Each zone has a name for debugging
console.log(rootZone.name);
// (rootZone.name).toEqual('<root>');
// expect(zoneA.name).toEqual('zoneA');
// // Child zone knows about its parent zone.
(one way reference)
// expect(zoneA.parent).toBe(rootZone);
}
title = 'app';
@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
constructor(private zone:NgZone,
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>) {
}
在 vscode 中调试时： 我可以访问来自 vscode 的智能。 但是错误是从 chrome:
抛出的AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'current' of undefined
at AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:12)
at checkAndUpdateDirectiveInline (core.js:9035)
at checkAndUpdateNodeInline (core.js:10299)
at checkAndUpdateNode (core.js:10261)
at debugCheckAndUpdateNode (core.js:10894)
at debugCheckDirectivesFn (core.js:10854)
at Object.eval [as updateDirectives] (AppComponent_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10846)
at checkAndUpdateView (core.js:10243)
at callWithDebugContext (core.js:11136)
View_AppComponent_Host_0 @ AppComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:10048
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11098
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1679
(anonymous) @ core.js:4524
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3719
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4524
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent @ core.js:4551
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap @ core.js:4493
(anonymous) @ core.js:4294
push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap @ core.js:4294
(anonymous) @ core.js:4260
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3760
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3751
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4289
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
AppComponent_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_Host_0 @ AppComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:10048
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11098
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1684
(anonymous) @ core.js:4524
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3719
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4524
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent @ core.js:4551
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap @ core.js:4493
(anonymous) @ core.js:4294
push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap @ core.js:4294
(anonymous) @ core.js:4260
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3760
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3751
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4289
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
core.js:3077 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
您需要指定它在 window 对象上。
如果您改用 console.dir(window["Zone"])，您会看到函数按预期记录到控制台
或者，您可以将 let Zone = window["Zone"] 添加到 ngOnInit