Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read properties of undefined (reading 'display') #44028

Closed
2 of 5 tasks
all2pie opened this issue Sep 14, 2021 · 12 comments
Closed
2 of 5 tasks

Cannot read properties of undefined (reading 'display') #44028

all2pie opened this issue Sep 14, 2021 · 12 comments
Labels
area: animations area: server Issues related to server-side rendering P2 The issue is important to a large percentage of users, with a workaround regression Indicates than the issue relates to something that worked in a previous version
Milestone

Comments

@all2pie
Copy link

all2pie commented Sep 14, 2021

🐞 Bug report

What modules are related to this issue?

  • aspnetcore-engine
  • builders
  • common
  • express-engine
  • hapi-engine

Description

On running npm run dev:ssr the code is compiled successfully but when i open the link then error occurs which is added in the exception below.

I have imported NoopAnimationsModule in app.server.module and i have also separated the app.module.ts and app.browser.module.ts

🔥 Exception or Error



ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR Error: Uncaught (in promise): [object Undefined]
    at resolvePromise (/home/haris/Work/TN/website/dist/website/server/main.js:208374:21)
    at /home/haris/Work/TN/website/dist/website/server/main.js:208269:11
    at /home/haris/Work/TN/website/dist/website/server/main.js:137200:32
    at ZoneDelegate.invoke (/home/haris/Work/TN/website/dist/website/server/main.js:207382:160)
    at Object.onInvoke (/home/haris/Work/TN/website/dist/website/server/main.js:79008:33)
    at ZoneDelegate.invoke (/home/haris/Work/TN/website/dist/website/server/main.js:207382:48)
    at Zone.run (/home/haris/Work/TN/website/dist/website/server/main.js:207110:37)
    at /home/haris/Work/TN/website/dist/website/server/main.js:208447:28
    at ZoneDelegate.invokeTask (/home/haris/Work/TN/website/dist/website/server/main.js:207415:173)
    at Object.onInvokeTask (/home/haris/Work/TN/website/dist/website/server/main.js:78995:33) {
  rejection: undefined,
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: undefined
  },
  zone:  Zone {
    _parent: Zone {
      _parent: null,
      _name: '',
      _properties: {},
      _zoneDelegate: [ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true },
    _zoneDelegate:  ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular *1],
      _parentDelegate: [ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: null,
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: null,
      _invokeZS: [Object],
      _invokeDlgt: [ZoneDelegate],
      _invokeCurrZone: [Circular *1],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [ZoneDelegate],
      _handleErrorCurrZone: [Circular *1],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [ZoneDelegate],
      _scheduleTaskCurrZone: [Circular *1],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [ZoneDelegate],
      _invokeTaskCurrZone: [Circular *1],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [ZoneDelegate],
      _cancelTaskCurrZone: [Circular *1],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [ZoneDelegate],
      _hasTaskDlgtOwner: [Circular *2],
      _hasTaskCurrZone: [Circular *1]
    }
  },
  task: ZoneTask {
    _zone:  Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: true,
      __zone_symbol__value: undefined
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function (anonymous)],
    invoke: [Function (anonymous)]
  }
}

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR NetworkError
    at XMLHttpRequest.send (/home/haris/Work/TN/website/dist/website/server/main.js:205262:19)
    at Observable._subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:16380:17)
    at Observable._trySubscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195988:25)
    at Observable.subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195974:22)
    at scheduleTask (/home/haris/Work/TN/website/dist/website/server/main.js:94831:32)
    at Observable._subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:94869:13)
    at Observable._trySubscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195988:25)
    at Observable.subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195974:22)
    at innerSubscribe (/home/haris/Work/TN/website/dist/website/server/main.js:196991:23)
    at MergeMapSubscriber._innerSub (/home/haris/Work/TN/website/dist/website/server/main.js:198335:98)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR NetworkError
    at XMLHttpRequest.send (/home/haris/Work/TN/website/dist/website/server/main.js:205262:19)
    at Observable._subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:16380:17)
    at Observable._trySubscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195988:25)
    at Observable.subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195974:22)
    at scheduleTask (/home/haris/Work/TN/website/dist/website/server/main.js:94831:32)
    at Observable._subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:94869:13)
    at Observable._trySubscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195988:25)
    at Observable.subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195974:22)
    at innerSubscribe (/home/haris/Work/TN/website/dist/website/server/main.js:196991:23)
    at MergeMapSubscriber._innerSub (/home/haris/Work/TN/website/dist/website/server/main.js:198335:98)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Invalid event target
    at setupSubscription (/home/haris/Work/TN/website/dist/website/server/main.js:197551:15)
    at Observable._subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:197525:9)
    at Observable._trySubscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195988:25)
    at Observable.subscribe (/home/haris/Work/TN/website/dist/website/server/main.js:195974:22)
    at HeaderComponent.ngOnInit (/home/haris/Work/TN/website/dist/website/server/main.js:211931:99)
    at callHook (/home/haris/Work/TN/website/dist/website/server/main.js:52862:22)
    at callHooks (/home/haris/Work/TN/website/dist/website/server/main.js:52831:17)
    at executeInitAndCheckHooks (/home/haris/Work/TN/website/dist/website/server/main.js:52782:9)
    at selectIndexInternal (/home/haris/Work/TN/website/dist/website/server/main.js:58783:17)
    at Module.ɵɵadvance (/home/haris/Work/TN/website/dist/website/server/main.js:58766:5)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at /home/haris/Work/TN/website/dist/website/server/main.js:14561:32
    at Array.forEach ()
    at HttpHeaders.lazyInit (/home/haris/Work/TN/website/dist/website/server/main.js:14555:38)
    at HttpHeaders.init (/home/haris/Work/TN/website/dist/website/server/main.js:14659:22)
    at HttpHeaders.keys (/home/haris/Work/TN/website/dist/website/server/main.js:14598:14)
    at HttpBatchLinkHandler.createBatchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138956:29)
    at OperationBatcher.HttpBatchLinkHandler.batchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138907:29)
    at OperationBatcher.enqueueRequest (/home/haris/Work/TN/website/dist/website/server/main.js:106957:24)
    at BatchLink._this.request (/home/haris/Work/TN/website/dist/website/server/main.js:107070:73)
    at HttpBatchLinkHandler.request (/home/haris/Work/TN/website/dist/website/server/main.js:138965:29)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at /home/haris/Work/TN/website/dist/website/server/main.js:14561:32
    at Array.forEach ()
    at HttpHeaders.lazyInit (/home/haris/Work/TN/website/dist/website/server/main.js:14555:38)
    at HttpHeaders.init (/home/haris/Work/TN/website/dist/website/server/main.js:14659:22)
    at HttpHeaders.keys (/home/haris/Work/TN/website/dist/website/server/main.js:14598:14)
    at HttpBatchLinkHandler.createBatchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138956:29)
    at OperationBatcher.HttpBatchLinkHandler.batchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138907:29)
    at OperationBatcher.enqueueRequest (/home/haris/Work/TN/website/dist/website/server/main.js:106957:24)
    at BatchLink._this.request (/home/haris/Work/TN/website/dist/website/server/main.js:107070:73)
    at HttpBatchLinkHandler.request (/home/haris/Work/TN/website/dist/website/server/main.js:138965:29)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at /home/haris/Work/TN/website/dist/website/server/main.js:14561:32
    at Array.forEach ()
    at HttpHeaders.lazyInit (/home/haris/Work/TN/website/dist/website/server/main.js:14555:38)
    at HttpHeaders.init (/home/haris/Work/TN/website/dist/website/server/main.js:14659:22)
    at HttpHeaders.keys (/home/haris/Work/TN/website/dist/website/server/main.js:14598:14)
    at HttpBatchLinkHandler.createBatchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138956:29)
    at OperationBatcher.HttpBatchLinkHandler.batchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138907:29)
    at OperationBatcher.enqueueRequest (/home/haris/Work/TN/website/dist/website/server/main.js:106957:24)
    at BatchLink._this.request (/home/haris/Work/TN/website/dist/website/server/main.js:107070:73)
    at HttpBatchLinkHandler.request (/home/haris/Work/TN/website/dist/website/server/main.js:138965:29)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at /home/haris/Work/TN/website/dist/website/server/main.js:14561:32
    at Array.forEach ()
    at HttpHeaders.lazyInit (/home/haris/Work/TN/website/dist/website/server/main.js:14555:38)
    at HttpHeaders.init (/home/haris/Work/TN/website/dist/website/server/main.js:14659:22)
    at HttpHeaders.keys (/home/haris/Work/TN/website/dist/website/server/main.js:14598:14)
    at HttpBatchLinkHandler.createBatchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138956:29)
    at OperationBatcher.HttpBatchLinkHandler.batchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138907:29)
    at OperationBatcher.enqueueRequest (/home/haris/Work/TN/website/dist/website/server/main.js:106957:24)
    at BatchLink._this.request (/home/haris/Work/TN/website/dist/website/server/main.js:107070:73)
    at HttpBatchLinkHandler.request (/home/haris/Work/TN/website/dist/website/server/main.js:138965:29)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at /home/haris/Work/TN/website/dist/website/server/main.js:14561:32
    at Array.forEach ()
    at HttpHeaders.lazyInit (/home/haris/Work/TN/website/dist/website/server/main.js:14555:38)
    at HttpHeaders.init (/home/haris/Work/TN/website/dist/website/server/main.js:14659:22)
    at HttpHeaders.keys (/home/haris/Work/TN/website/dist/website/server/main.js:14598:14)
    at HttpBatchLinkHandler.createBatchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138956:29)
    at OperationBatcher.HttpBatchLinkHandler.batchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138907:29)
    at OperationBatcher.enqueueRequest (/home/haris/Work/TN/website/dist/website/server/main.js:106957:24)
    at BatchLink._this.request (/home/haris/Work/TN/website/dist/website/server/main.js:107070:73)
    at HttpBatchLinkHandler.request (/home/haris/Work/TN/website/dist/website/server/main.js:138965:29)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at /home/haris/Work/TN/website/dist/website/server/main.js:14561:32
    at Array.forEach ()
    at HttpHeaders.lazyInit (/home/haris/Work/TN/website/dist/website/server/main.js:14555:38)
    at HttpHeaders.init (/home/haris/Work/TN/website/dist/website/server/main.js:14659:22)
    at HttpHeaders.keys (/home/haris/Work/TN/website/dist/website/server/main.js:14598:14)
    at HttpBatchLinkHandler.createBatchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138956:29)
    at OperationBatcher.HttpBatchLinkHandler.batchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138907:29)
    at OperationBatcher.enqueueRequest (/home/haris/Work/TN/website/dist/website/server/main.js:106957:24)
    at BatchLink._this.request (/home/haris/Work/TN/website/dist/website/server/main.js:107070:73)
    at HttpBatchLinkHandler.request (/home/haris/Work/TN/website/dist/website/server/main.js:138965:29)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at /home/haris/Work/TN/website/dist/website/server/main.js:14561:32
    at Array.forEach ()
    at HttpHeaders.lazyInit (/home/haris/Work/TN/website/dist/website/server/main.js:14555:38)
    at HttpHeaders.init (/home/haris/Work/TN/website/dist/website/server/main.js:14659:22)
    at HttpHeaders.keys (/home/haris/Work/TN/website/dist/website/server/main.js:14598:14)
    at HttpBatchLinkHandler.createBatchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138956:29)
    at OperationBatcher.HttpBatchLinkHandler.batchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138907:29)
    at OperationBatcher.enqueueRequest (/home/haris/Work/TN/website/dist/website/server/main.js:106957:24)
    at BatchLink._this.request (/home/haris/Work/TN/website/dist/website/server/main.js:107070:73)
    at HttpBatchLinkHandler.request (/home/haris/Work/TN/website/dist/website/server/main.js:138965:29)

ERROR TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at /home/haris/Work/TN/website/dist/website/server/main.js:91846:29

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at /home/haris/Work/TN/website/dist/website/server/main.js:14561:32
    at Array.forEach ()
    at HttpHeaders.lazyInit (/home/haris/Work/TN/website/dist/website/server/main.js:14555:38)
    at HttpHeaders.init (/home/haris/Work/TN/website/dist/website/server/main.js:14659:22)
    at HttpHeaders.keys (/home/haris/Work/TN/website/dist/website/server/main.js:14598:14)
    at HttpBatchLinkHandler.createBatchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138956:29)
    at OperationBatcher.HttpBatchLinkHandler.batchKey (/home/haris/Work/TN/website/dist/website/server/main.js:138907:29)
    at OperationBatcher.enqueueRequest (/home/haris/Work/TN/website/dist/website/server/main.js:106957:24)
    at BatchLink._this.request (/home/haris/Work/TN/website/dist/website/server/main.js:107070:73)
    at HttpBatchLinkHandler.request (/home/haris/Work/TN/website/dist/website/server/main.js:138965:29)

TypeError: Cannot read properties of undefined (reading 'display')
    at cloakElement (/home/haris/Work/TN/website/dist/website/server/main.js:4985:36)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4991:48
    at Set.forEach ()
    at cloakAndComputeStyles (/home/haris/Work/TN/website/dist/website/server/main.js:4991:14)
    at /home/haris/Work/TN/website/dist/website/server/main.js:4560:13
    at Map.forEach ()
    at TransitionAnimationEngine._flushAnimations (/home/haris/Work/TN/website/dist/website/server/main.js:4559:22)
    at TransitionAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:4333:32)
    at InjectableAnimationEngine.flush (/home/haris/Work/TN/website/dist/website/server/main.js:5196:32)
    at InjectableAnimationEngine.ngOnDestroy (/home/haris/Work/TN/website/dist/website/server/main.js:92016:14)

🌍 Environment



Angular CLI: 12.2.4
Node: 16.9.0 (Unsupported)
Package Manager: npm 7.22.0
OS: linux x64

Angular: 12.2.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.4
@angular-devkit/build-angular   12.2.4
@angular-devkit/core            12.2.4
@angular-devkit/schematics      12.2.4
@nguniversal/builders           12.1.0
@nguniversal/express-engine     12.1.0
@schematics/angular             11.2.14
rxjs                            6.6.7
typescript                      4.2.4

@all2pie
Copy link
Author

all2pie commented Sep 14, 2021

Also tried on Node 14:

Angular CLI: 12.2.5
Node: 14.17.6
Package Manager: npm 6.14.15
OS: linux x64

@alan-agius4
Copy link
Contributor

Please provide a reproduction.

@all2pie
Copy link
Author

all2pie commented Sep 22, 2021

Some errors were related to apollo-angular and some were related to ngx-translate and some with window and local storage, all of which i have fixed.

But the main breaking issue Cannot read properties of undefined (reading 'display') at cloakElement is related to my custom directive specifically this:

  @HostBinding('@animate')
  private trigger?: Transition;

I can not find any thing related to this

@all2pie
Copy link
Author

all2pie commented Sep 22, 2021

Also i had to go through a lot of trouble using hit and trial and commenting random things to find the issues as the error message are not related to my code instead those were internal angular errors which i cloud not debug.

It would be great if someone could work on this as this is a very crucial thing.

@alan-agius4
Copy link
Contributor

Please provide a minimal reproduction as otherwise we will be unable to investigate this issue.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

@all2pie
Copy link
Author

all2pie commented Sep 22, 2021

Here is the Minimal Reproduction of the issue

@DzmVasileusky
Copy link

I have the same issue on my project.
We are using ngx-charts-pie-chart.
In my case the problem is when there is an attempt to animate <svg> elements.
We tried to switch off animations with NoopAnimationsModule and with passing [animations]="false" to the ngx-charts-pie-chart but both haven't worked.
Angular animation module is trying to get styles of the <svg> elements like <g>. And even switching off animations doesn't stop animation module from call cloakAndComputeStyles towards <g> elements which are undefined in SSR.
Still trying to find the workaround.
I'll post an answer here if we will find it earlier then Angular team will fix it.

@all2pie
Copy link
Author

all2pie commented Nov 3, 2021

@alan-agius4 Can you please update the label so someone can start working on it.

@alan-agius4
Copy link
Contributor

I did take a look and it doesn't appear to be an issue with Universal, but rather the framework itself. Therefore, I am going to transfer it over to the FW repo for a better triage.

@alan-agius4 alan-agius4 transferred this issue from angular/universal Nov 3, 2021
@alan-agius4 alan-agius4 added area: animations area: server Issues related to server-side rendering labels Nov 3, 2021
@ngbot ngbot bot modified the milestone: needsTriage Nov 3, 2021
@dario-piotrowicz
Copy link
Contributor

dario-piotrowicz commented Nov 21, 2021

I've found an extremely simple solution to this, seems like the animation cloakElement gets an element with an undefined style field here:

function cloakElement(element: any, value?: string) {
const oldValue = element.style.display;

before accessing style we could just add something like:

 if(!element.style) {
     return null;
 }

I just tried that and it does seem to work pretty nicely

but I doubt that this is the right solution (but it could be?... 🤷) I am not very familiar with SSR/Universal, so I have no idea why the element there doesn't get a style nor if that is the expected behavior for SSR elements 🤷

@jessicajaniuk jessicajaniuk added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Dec 13, 2021
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Dec 13, 2021
@CaerusKaru
Copy link
Member

This was introduced as part of #41059; as noted in the breaking changes for that PR there are some areas where SSR users need to take extra caution. I'm unclear as to why that PR was merged without SSR test coverage, so I'll have to check with the team (and decide whether we should rollback until we have the docs changes ready or not).

atscott added a commit to atscott/angular that referenced this issue Jan 20, 2022
This issue was discovered when debugging angular#44028. The root cause ended up being the TODO
here which points out a change in the namespaces between Ivy and VE. As a result,
the server renderer was always passing `undefined` as the namespace.

The effect of this for angular#44028 was that the SVG element was being created
as just an element rather than an SVGElement. [Here][1] is the code reference
for what happens in Domino. Finally, when the animation attempts to
apply to the SVG element, it fails to because the element doesn't have a
`style` property.

Resolves angular#44028

[1]: https://github.com/fgnass/domino/blob/12a5f67136a0ac10e3fa1649b8787ba3b309e9a7/lib/Document.js#L232-L239
atscott added a commit to atscott/angular that referenced this issue Jan 20, 2022
This issue was discovered when debugging angular#44028. The root cause ended up being the TODO
here which points out a change in the namespaces between Ivy and VE. As a result,
the server renderer was always passing `undefined` as the namespace.

The effect of this for angular#44028 was that the SVG element was being created
as just an element rather than an SVGElement. [Here][1] is the code reference
for what happens in Domino. Finally, when the animation attempts to
apply to the SVG element, it fails to because the element doesn't have a
`style` property.

Resolves angular#44028

[1]: https://github.com/fgnass/domino/blob/12a5f67136a0ac10e3fa1649b8787ba3b309e9a7/lib/Document.js#L232-L239
@atscott atscott added regression Indicates than the issue relates to something that worked in a previous version and removed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Jan 20, 2022
@ngbot ngbot bot modified the milestones: Backlog, needsTriage Jan 20, 2022
@atscott atscott added the P2 The issue is important to a large percentage of users, with a workaround label Jan 20, 2022
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Jan 20, 2022
atscott added a commit to atscott/angular that referenced this issue Jan 31, 2022
…erer

Support for namespace URIs rather than short namespace names was added in
angular@2b9cc85 to
support how Ivy passed around the namespace URI rather than short name at the time.
As a side-effect, this meant that namespace URIs were supported by the
default dom renderer as part of the public API (likely unintentionally).

It did not, however extend the support to other parts of the system (setAttribute, setAttribute,
and the ServerRenderer). In the future we should decide what exactly the
semantics for dealing with namespaces should be and make it consistent.

fixes angular#44028
atscott added a commit to atscott/angular that referenced this issue Jan 31, 2022
…erer

Support for namespace URIs rather than short namespace names was added in
angular@2b9cc85 to
support how Ivy passed around the namespace URI rather than short name at the time.
As a side-effect, this meant that namespace URIs were supported by the
default dom renderer as part of the public API (likely unintentionally).

It did not, however extend the support to other parts of the system (setAttribute, setAttribute,
and the ServerRenderer). In the future we should decide what exactly the
semantics for dealing with namespaces should be and make it consistent.

fixes angular#44028
atscott added a commit to atscott/angular that referenced this issue Jan 31, 2022
…m renderer

Support for namespace URIs rather than short namespace names was added in
angular@2b9cc85 to
support how Ivy passed around the namespace URI rather than short name at the time.
As a side-effect, this meant that namespace URIs were supported by the
default dom renderer as part of the public API (likely unintentionally).

It did not, however extend the support to other parts of the system (setAttribute, setAttribute,
and the ServerRenderer). In the future we should decide what exactly the
semantics for dealing with namespaces should be and make it consistent.

fixes angular#44028
jessicajaniuk pushed a commit that referenced this issue Jan 31, 2022
…m renderer (#44914)

Support for namespace URIs rather than short namespace names was added in
2b9cc85 to
support how Ivy passed around the namespace URI rather than short name at the time.
As a side-effect, this meant that namespace URIs were supported by the
default dom renderer as part of the public API (likely unintentionally).

It did not, however extend the support to other parts of the system (setAttribute, setAttribute,
and the ServerRenderer). In the future we should decide what exactly the
semantics for dealing with namespaces should be and make it consistent.

fixes #44028

PR Close #44914
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 3, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: animations area: server Issues related to server-side rendering P2 The issue is important to a large percentage of users, with a workaround regression Indicates than the issue relates to something that worked in a previous version
Projects
None yet
7 participants