When I try to use Zone in ngOnInit on my angular application, so I set an breakpoint on line 11th, and I get the function Zone(parent,zoneSpec){....}, but return undefined when start in chrome? this is my code:(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>) {
}
When debugging in vscode: I can Access from the vscode intellgence. But error was threw from 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.
You'll need to specify that it's on the window object.
If you use console.dir(window["Zone"]) instead, you will see that the function is logged to the console as expected
Alternately, you can add let Zone = window["Zone"] to the first line of ngOnInit