Barista: [Section extensible] La coercition booléenne ne fonctionne pas correctement pour la propriété « expandée »
Rapport d'erreur
Salut l'équipe ! Il semble que la propriété expanded ne fonctionne pas avec la coercition, mais fonctionne correctement si elle est définie sur : [expanded]="true" . Cela fonctionnait bien pendant longtemps, mais a récemment cessé de fonctionner et empêche l'une de mes pages de production de s'afficher correctement : https://ci360.dynatrace.com/account/environment/cloud/managed/298
Comportement prévisible
Je m'attends à ce que les éléments suivants fonctionnent comme d'habitude :
<dt-expandable-section expanded>
Comportement actuel
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)
Solution possible
<dt-expandable-section [expanded]="true">
Étapes pour reproduire
cloner : https://github.com/areknow/a-expandable-section-demo et exécuter
Versions utilisées :
- @dynatrace/barista-components : 7.6.0
Merci beaucoup pour votre travail acharné!
areknow
Tous les 13 commentaires
Hé @areknow merci beaucoup d'avoir signalé cela, mais je ne peux pas reproduire cela dans stackblitz
https://stackblitz.com/edit/github-yp9pwy?file=src/expandable -section/expandable-section-default-example/expandable-section-default-example.html
De plus, lorsque je regarde le code, le coerceBooleanProperty est utilisé. ??
Êtes-vous sûr d'utiliser correctement le composant ?
@Input()
get expanded(): boolean {
return this._panel.expanded;
}
set expanded(value: boolean) {
this._panel.expanded = coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
}
lukasholzer
le 11 août 2020
Salut @lukasholzer ! Je n'étais pas non plus capable de reproduire en stackblitz, j'ai donc créé un repo minimal. Cela peut indiquer un problème avec Ivy qui ne se produit pas avec le rendu de vue. Avez-vous pu cloner le dépôt et voir l'erreur de la console ?
areknow
le 11 août 2020
Bonjour @lukasholzer ,
Je suis également en mesure de reproduire le problème, avec la notation abrégée de la directive.
josecolella
le 11 août 2020
@areknow Pourriez-vous essayer d'utiliser le matériel extensible dans votre application et comparer le comportement. Je suis curieux de savoir si nous avons un problème de compilation avec la compatibilité Ivy. Ce serait une configuration minimale https://stackblitz.com/edit/angular-rubmxc?file=src/app/expansion -steps-example.html
ffriedl89
le 12 août 2020
@areknow, j'ai cloné votre
en plus de cela, veuillez mettre à jour la version highcharts et supprimer le @types/highcharts
lukasholzer
le 12 août 2020
@ffriedl89 J'ai importé le MatExpansionModule et ajouté le balisage du composant au projet, il fonctionne parfaitement avec la notation directive abrégée.
@lukasholzer J'ai supprimé @types/highcharts et mis highcharts jour
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, j'ai mis l'étiquette non reproductible car je vois l'erreur ci-dessus lorsque je veux servir l'application. Je ne peux donc pas servir la demande.
Il n'est pas possible de laisser votre repo s'exécuter pour moi.
Étapes que j'ai faites :
git clone ...npm installng serve
lukasholzer
le 12 août 2020
@lukasholzer J'ai exécuté le dépôt sur trois machines distinctes. Je ne sais pas quel est le problème, c'est un projet super basique
@josecolella @toddbaert a également exécuté le dépôt et a rencontré le même problème.
~/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 En suivant les commandes indiquées dans votre message, je pourrai exécuter le projet sans aucun problème
josecolella
le 12 août 2020
@lukasholzer J'ai également pu reproduire le problème avec un message de compilation réussi.
- Repo git cloné
- npm installer
- ng servir
Résultats:
cmp11290
le 12 août 2020
@areknow hey @thomaspink et moi-même avons trouvé le problème que nous allons résoudre ! :) Vous vous demandez comment cela peut fonctionner même dans VE alors que nous essayons de définir une propriété sur le setter qui est un viewChild donc plus tard Lifecycle. ??
Est-ce une solution urgente pour vous ou êtes-vous d'accord pour l'obtenir avec 8.0.0, sinon nous devons faire un rétroportage pour ce problème.
lukasholzer
le 13 août 2020
Corrigé par PR #1491
thomaspink
le 13 août 2020
@lukasholzer c'est une excellente nouvelle ! J'ai effectué un correctif pour mon application, je peux donc attendre la 8.0.0. Merci!
areknow
le 13 août 2020
Questions connexes
kaikcreator
·
10Commentaires
areknow
·
12Commentaires
schobocop
·
10Commentaires
samuelfahrngruber
·
13Commentaires
ffriedl89
·
11Commentaires
Commentaire le plus utile
@lukasholzer En suivant les commandes indiquées dans votre message, je pourrai exécuter le projet sans aucun problème