Barista: [Sección expandible] La coerción booleana no funciona correctamente para la propiedad "expandida"
Informe de error
Hola equipo! Parece que la propiedad expanded no funciona con coerción, pero funciona correctamente si se establece como: [expanded]="true" . Esto funcionó bien durante mucho tiempo, pero recientemente dejó de funcionar e impide que una de mis páginas de producción se renderice correctamente: https://ci360.dynatrace.com/account/environment/cloud/managed/298
Comportamiento esperado
Espero que lo siguiente funcione como de costumbre:
<dt-expandable-section expanded>
Comportamiento actual
TypeError: Cannot set property 'expanded' of undefined
at DtExpandableSection.set expanded [as expanded] (dynatrace-barista-components-expandable-section.js:79)
at Object.ngOnChangesSetInput [as setInput] (core.js:26879)
at setInputsFromAttrs (core.js:13039)
at instantiateAllDirectives (core.js:12752)
at createDirectivesInstances (core.js:11989)
at Module.ɵɵelementStart (core.js:21043)
at AppComponent_Template (app.component.html:1)
at executeTemplate (core.js:11949)
at renderView (core.js:11735)
at renderComponent (core.js:13244)
Solución posible
<dt-expandable-section [expanded]="true">
Pasos para reproducir
clonar: https://github.com/areknow/a-expandable-section-demo y ejecutar
Versiones utilizadas:
- @ dynatrace / barista-components : 7.6.0
¡Muchas gracias por su arduo trabajo!
areknow
Todos 13 comentarios
Hola @areknow, muchas gracias por informar de esto, pero no puedo reproducir esto en stackblitz
https://stackblitz.com/edit/github-yp9pwy?file=src/expandable -section / expanddable-section-default-example / expanddable-section-default-example.html
Además, cuando miro el código, se usa coerceBooleanProperty . 🤔
¿Está seguro de que utiliza el componente correctamente?
@Input()
get expanded(): boolean {
return this._panel.expanded;
}
set expanded(value: boolean) {
this._panel.expanded = coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
}
lukasholzer
en 11 ago. 2020
¡Hola @lukasholzer! Tampoco pude reproducir en stackblitz, así que creé un repositorio mínimo. Esto podría indicar un problema con Ivy que no ocurre con el renderizador de vistas. ¿Pudiste clonar el repositorio y ver el error de la consola?
areknow
en 11 ago. 2020
Hola @lukasholzer ,
También puedo reproducir el problema con la notación abreviada de la directiva.
josecolella
en 11 ago. 2020
@areknow ¿Podría intentar utilizar el material expandible en su aplicación y comparar el comportamiento? Tengo curiosidad por saber si tenemos algún problema de compilación con la compatibilidad con Ivy. Esta sería una configuración mínima https://stackblitz.com/edit/angular-rubmxc?file=src/app/expansion -steps-example.html
ffriedl89
en 12 ago. 2020
@areknow Cloné su repositorio, hice una instalación de npm y ahora un servicio de ng:
además de eso, actualice la versión highcharts y elimine @types/highcharts
lukasholzer
en 12 ago. 2020
@ ffriedl89 Importé MatExpansionModule y agregué el marcado del componente al proyecto, funciona perfectamente bien con la notación de directiva abreviada.
@lukasholzer Eliminé @types/highcharts y actualicé highcharts a la última versión. Sigue siendo el mismo problema:
core.js:6185 ERROR TypeError: Cannot set property 'expanded' of undefined
at DtExpandableSection.set expanded [as expanded] (dynatrace-barista-components-expandable-section.js:79)
at Object.ngOnChangesSetInput [as setInput] (core.js:26879)
at setInputsFromAttrs (core.js:13039)
at instantiateAllDirectives (core.js:12752)
at createDirectivesInstances (core.js:11989)
at Module.ɵɵelementStart (core.js:21043)
at AppComponent_Template (app.component.html:1)
at executeTemplate (core.js:11949)
at renderView (core.js:11735)
at renderComponent (core.js:13244)
@areknow le puse la etiqueta no reproducible ya que veo el error anterior cuando quiero servir la aplicación. Entonces no puedo entregar la solicitud.
No es posible dejar que su repositorio se ejecute por mí.
Pasos que hice:
git clone ...npm installng serve
lukasholzer
en 12 ago. 2020
@lukasholzer He ejecutado el repositorio en tres máquinas separadas. No estoy seguro de cuál es el problema, es un proyecto súper básico 🤔
@josecolella @toddbaert también ha ejecutado el repositorio y ha visto el mismo problema.
~/Desktop/test
❯ git clone https://github.com/areknow/a-expandable-section-demo.git .
Cloning into '.'...
remote: Enumerating objects: 47, done.
remote: Counting objects: 100% (47/47), done.
remote: Compressing objects: 100% (37/37), done.
remote: Total 47 (delta 10), reused 45 (delta 8), pack-reused 0
Unpacking objects: 100% (47/47), done.
~/Desktop/test master
❯ ls
README.md angular.json browserslist e2e karma.conf.js package-lock.json package.json src tsconfig.app.json tsconfig.json tsconfig.spec.json tslint.json
~/Desktop/test master
❯ npm i
> [email protected] install /Users/arnaud.crowther/Desktop/test/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack at ChildProcess.emit (events.js:311:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/bin/node" "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/arnaud.crowther/Desktop/test/node_modules/watchpack-chokidar2/node_modules/fsevents
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
> [email protected] install /Users/arnaud.crowther/Desktop/test/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack at ChildProcess.emit (events.js:311:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/bin/node" "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/arnaud.crowther/Desktop/test/node_modules/webpack-dev-server/node_modules/fsevents
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
> [email protected] postinstall /Users/arnaud.crowther/Desktop/test/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> @angular/[email protected] postinstall /Users/arnaud.crowther/Desktop/test/node_modules/@angular/cli
> node ./bin/postinstall/script.js
added 1391 packages from 1132 contributors and audited 1393 packages in 20.393s
41 packages are looking for funding
run `npm fund` for details
found 5 vulnerabilities (3 low, 2 high)
run `npm audit fix` to fix them, or `npm audit` for details
~/Desktop/test master 22s
❯ ng serve
0% compiling
Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/cdk/scrolling : es2015 as esm2015
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/cdk/tree : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/cdk/portal : es2015 as esm2015
Compiling @angular/cdk/overlay : es2015 as esm2015
Compiling @dynatrace/barista-components/core : es2015 as esm2015
Compiling @dynatrace/barista-components/icon : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/cdk/table : es2015 as esm2015
Compiling @angular/cdk/drag-drop : es2015 as esm2015
Compiling @dynatrace/barista-components/button : es2015 as esm2015
Compiling @dynatrace/barista-components/indicator : es2015 as esm2015
Compiling @dynatrace/barista-components/empty-state : es2015 as esm2015
Compiling @dynatrace/barista-components/form-field : es2015 as esm2015
Compiling @dynatrace/barista-components/formatters : es2015 as esm2015
Compiling @angular/cdk/text-field : es2015 as esm2015
Compiling @dynatrace/barista-components/input : es2015 as esm2015
Compiling @dynatrace/barista-components/checkbox : es2015 as esm2015
Compiling @dynatrace/barista-components/pagination : es2015 as esm2015
Compiling @dynatrace/barista-components/table : es2015 as esm2015
Compiling @dynatrace/barista-components/expandable-panel : es2015 as esm2015
Compiling @dynatrace/barista-components/expandable-section : es2015 as esm2015
Compiling @angular/cdk/accordion : es2015 as esm2015
Compiling @angular/material/expansion : es2015 as esm2015
chunk {main} main.js, main.js.map (main) 14 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 150 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 108 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.99 MB [initial] [rendered]
Date: 2020-08-12T15:43:23.068Z - Hash: 1ecde4c6e7201f777336 - Time: 57275ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
Date: 2020-08-12T15:43:24.031Z - Hash: 1ecde4c6e7201f777336
5 unchanged chunks
Time: 537ms
: Compiled successfully.
@lukasholzer Siguiendo los comandos indicados en su publicación, podré ejecutar el proyecto sin ningún problema
josecolella
en 12 ago. 2020
@lukasholzer Yo también pude reproducir el problema con un mensaje de compilación exitoso.
- Repositorio de git clonado
- npm install
- ng servir
Resultados:
cmp11290
en 12 ago. 2020
@areknow oye @thomaspink y yo encontramos el problema que arreglaremos. :) Me pregunto cómo puede funcionar esto incluso en VE, ya que estamos tratando de establecer una propiedad en el setter que es un viewChild así que más tarde Lifecycle. 🤔
¿Es esta una solución urgente para usted o está bien para obtenerla con 8.0.0? De lo contrario, tendremos que hacer un backport para este problema.
lukasholzer
en 13 ago. 2020
Fijado por PR # 1491
thomaspink
en 13 ago. 2020
@lukasholzer ¡Eso es una gran noticia! Realicé una corrección urgente para mi aplicación, por lo que puedo esperar hasta la versión 8.0.0. ¡Gracias!
areknow
en 13 ago. 2020
Temas relacionados
kaikcreator
·
10Comentarios
b-wohs
·
3Comentarios
lukasholzer
·
8Comentarios
lukasholzer
·
8Comentarios
areknow
·
12Comentarios
Comentario más útil
@lukasholzer Siguiendo los comandos indicados en su publicación, podré ejecutar el proyecto sin ningún problema