Uncaught (in promise): InvalidCharacterError

Version imprimable

13/12/2020, 06h06
Gluups

Uncaught (in promise): InvalidCharacterError

Bonjour tout le monde,

Dans un site Angular, quand la console affiche quelque chose comme ça :

Citation:

ERROR Error: Uncaught (in promise): InvalidCharacterError: String contains an invalid character

On peut éplucher son code pour vérifier si vraiment on assume tout ce qu'on a tapé, ou si quelque part on n'aurait pas oublié de fermer une accolade.

Est-ce que des fois il n'y aurait pas un peu plus direct ?
Moyen de savoir au moins dans quel fichier ça se passe ?

Parce que la console me dit que c'est dans core.js, et de ça je doute.
13/12/2020, 13h02
krakatoa

il y a que ça ?

tu peux mettre toute l'erreur stp

Citation:

ERROR Error: Uncaught (in promise): InvalidCharacterError: String contains an invalid character
setAttribute@http://localhost:4200/vendor.js:47761:16
setUpAttributes@http://localhost:4200/vendor.js:11489:30
ɵɵelementStart@http://localhost:4200/vendor.js:22095:24
WeatherComponent_Template@http://localhost:4200/main.js:476:52
executeTemplate@http://localhost:4200/vendor.js:15515:19
renderView@http://localhost:4200/vendor.js:15324:28
renderComponent@http://localhost:4200/vendor.js:16585:15
renderChildComponents@http://localhost:4200/vendor.js:15183:24
renderView@http://localhost:4200/vendor.js:15349:34
create@http://localhost:4200/vendor.js:30404:23
createComponent@http://localhost:4200/vendor.js:18320:55
activateWith@http://localhost:4200/vendor.js:54385:40
activateRoutes@http://localhost:4200/vendor.js:51416:40
activateChildRoutes/<@http://localhost:4200/vendor.js:51367:18
activateChildRoutes@http://localhost:4200/vendor.js:51366:29
activate@http://localhost:4200/vendor.js:51294:14
activateRoutes/<@http://localhost:4200/vendor.js:51279:10
_next@http://localhost:4200/vendor.js:73449:35
next@http://localhost:4200/vendor.js:68954:18
_next@http://localhost:4200/vendor.js:75833:26
next@http://localhost:4200/vendor.js:68954:18
_next@http://localhost:4200/vendor.js:73455:26
next@http://localhost:4200/vendor.js:68954:18
notifyNext@http://localhost:4200/vendor.js:75509:26
_next@http://localhost:4200/vendor.js:68249:21
next@http://localhost:4200/vendor.js:68954:18
_next@http://localhost:4200/vendor.js:73455:26
next@http://localhost:4200/vendor.js:68954:18
subscribeToArray/<@http://localhost:4200/vendor.js:78373:20
_trySubscribe@http://localhost:4200/vendor.js:68410:25
subscribe@http://localhost:4200/vendor.js:68396:22
call@http://localhost:4200/vendor.js:73436:23
subscribe@http://localhost:4200/vendor.js:68391:31
subscribeToResult@http://localhost:4200/vendor.js:78491:23
_innerSub@http://localhost:4200/vendor.js:75485:115
_next@http://localhost:4200/vendor.js:75475:14
next@http://localhost:4200/vendor.js:68954:18
notifyNext@http://localhost:4200/vendor.js:75509:26
_next@http://localhost:4200/vendor.js:68249:21
next@http://localhost:4200/vendor.js:68954:18
_next@http://localhost:4200/vendor.js:73455:26
next@http://localhost:4200/vendor.js:68954:18
_next@http://localhost:4200/vendor.js:75833:26
next@http://localhost:4200/vendor.js:68954:18
notifyNext@http://localhost:4200/vendor.js:75509:26
_next@http://localhost:4200/vendor.js:68249:21
next@http://localhost:4200/vendor.js:68954:18
_next@http://localhost:4200/vendor.js:75833:26
next@http://localhost:4200/vendor.js:68954:18
notifyNext@http://localhost:4200/vendor.js:73694:26
_next@http://localhost:4200/vendor.js:68249:21
next@http://localhost:4200/vendor.js:68954:18
notifyNext@http://localhost:4200/vendor.js:73694:26
_next@http://localhost:4200/vendor.js:68249:21
next@http://localhost:4200/vendor.js:68954:18
subscribeToArray/<@http://localhost:4200/vendor.js:78373:20
_trySubscribe@http://localhost:4200/vendor.js:68410:25
subscribe@http://localhost:4200/vendor.js:68396:22
subscribeToResult@http://localhost:4200/vendor.js:78491:23
_innerSub@http://localhost:4200/vendor.js:73681:116
_tryNext@http://localhost:4200/vendor.js:73675:14
_next@http://localhost:4200/vendor.js:73658:18
next@http://localhost:4200/vendor.js:68954:18
_complete@http://localhost:4200/vendor.js:75658:29
complete@http://localhost:4200/vendor.js:68966:18
_complete@http://localhost:4200/vendor.js:75853:33
complete@http://localhost:4200/vendor.js:68966:18
_complete@http://localhost:4200/vendor.js:73689:30
complete@http://localhost:4200/vendor.js:68966:18
subscribeToArray/<@http://localhost:4200/vendor.js:78375:16
_trySubscribe@http://localhost:4200/vendor.js:68410:25
subscribe@http://localhost:4200/vendor.js:68396:22
call@http://localhost:4200/vendor.js:73643:23
subscribe@http://localhost:4200/vendor.js:68391:31
call@http://localhost:4200/vendor.js:75803:23
subscribe@http://localhost:4200/vendor.js:68391:31
call@http://localhost:4200/vendor.js:75628:23
subscribe@http://localhost:4200/vendor.js:68391:31
call@http://localhost:4200/vendor.js:73643:23
subscribe@http://localhost:4200/vendor.js:68391:31
subscribeToResult@http://localhost:4200/vendor.js:78491:23
_innerSub@http://localhost:4200/vendor.js:73681:116
_tryNext@http://localhost:4200/vendor.js:73675:14
_next@http://localhost:4200/vendor.js:73658:18
next@http://localhost:4200/vendor.js:68954:18
subscribeToArray/<@http://localhost:4200/vendor.js:78373:20
_trySubscribe@http://localhost:4200/vendor.js:68410:25
subscribe@http://localhost:4200/vendor.js:68396:22
call@http://localhost:4200/vendor.js:73643:23
subscribe@http://localhost:4200/vendor.js:68391:31
call@http://localhost:4200/vendor.js:75803:23
subscribe@http://localhost:4200/vendor.js:68391:31
subscribeToResult@http://localhost:4200/vendor.js:78491:23
_innerSub@http://localhost:4200/vendor.js:75485:115
_next@http://localhost:4200/vendor.js:75475:14
next@http://localhost:4200/vendor.js:68954:18
_next@http://localhost:4200/vendor.js:75833:26
next@http://localhost:4200/vendor.js:68954:18
subscribeToArray/<@http://localhost:4200/vendor.js:78373:20

Angular 8

resolvePromise
resolvePromise
scheduleResolveOrReject
invokeTask
onInvokeTask
invokeTask
runTask
drainMicroTaskQueue

Du coup j'ai chargé vendor.js, ce que je n'arrivais pas à faire ce matin, et je suis allé voir à la ligne indiquée :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 setAttribute(el, name, value, namespace) { if (namespace) { name = namespace + ':' + name; // TODO(FW-811): Ivy may cause issues here because it's passing around // full URIs for namespaces, therefore this lookup will fail. const namespaceUri = NAMESPACE_URIS[namespace]; if (namespaceUri) { el.setAttributeNS(namespaceUri, name, value); } else { el.setAttribute(name, value); } } else { el.setAttribute(name, value); } }
Et donc dans el.setAttribute(name, value), le dernier ci-dessus, le caractère incorrect serait le s de setAttribute.

J'ai pu charger vendor.js à l'adresse http://localhost:4200/vendor.js
ce qui permet de connaître son code.

En revanche dans l'onglet débogueur tout ce qu'il contient c'est

Citation:

Erreur lors du chargement de cet URI : Unknown source

13/12/2020, 13h56
krakatoa

(1)
supprime le dossier: /node_module
re installe
npm i

(2) compile en mode prod pour voir :
ng build --prod
13/12/2020, 14h17
Gluups

Ah oui quand même.
Tout ça parce que dans l'appel d'un nbgTypeahead depuis le navigateur, j'ai tapé !instance au lieu de #instance.

Quand Madame Michu signale l'erreur, elle dit "Marche pô !"

Quand c'est Angular c'est un peu mieux, on sait qu'il y a une faute de frappe.
Mais Boudiou si on savait où, ça aiderait bien.
13/12/2020, 14h25
dukoid

tu veux dire dans l'url ?
si c'est le cas c'est normal. une url n'est jamais vérifié, tu peux taper ce que tu veux

Plus exactement dans le HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
      <div class="row" id="rowCountry">
        <div class="col-md-3 form-group">
          <input type="text"
                 id="country"
                 formControlName="country"
                 [ngbTypeahead]="searchCountries"
                 #instance="ngbTypeahead"                      <!-- là là ici là -->
                 [inputFormatter]="countryFormatter"
                 [resultFormatter]="countryFormatter"
                 (focus)="focus$.next($event.target.value)"
                 (click)="click$.next($event.target.value)"
                 placeHolder="Country"
                 class="form-control" />
        </div>
    </div>

il y avait des indices dans la trace comme: WeatherComponent, Template et setAttribute
mais oui c'est difficile de remonter l'endroit exact dans la vue et surtout à l'exécution
et donc dans ce cas la, c'est plutot le navigateur le responsable de la remonté d'erreur ;)
Code:

1 2 3 4 5 setAttribute@http://localhost:4200/vendor.js:47761:16 setUpAttributes@http://localhost:4200/vendor.js:11489:30 ɵɵelementStart@http://localhost:4200/vendor.js:22095:24 WeatherComponent_Template@http://localhost:4200/main.js:476:52

13/12/2020, 14h40
Gluups

Honnêtement c'est vrai que je me doutais un peu du composant en cause.
Mais ce n'était même pas la peine de chercher dans WeatherComponent.ts, puisque l'erreur était dans WeatherComponent.html.
Il n'y a qu'en comparant au projet précédent que j'ai trouvé, car c'était une répétition. Mais en conditions réelles, il n'y a pas de projet précédent.
13/12/2020, 14h52
dukoid

WeatherComponent, Template et setAttribute

"template" veut dire que c'est du coté HTML ;)
13/12/2020, 14h58
Gluups

Oui j'aurai au moins appris à faire attention à ça.
Si c'est du côté ts, ça dit module ?

Tu crois qu'il aurait fallu bidouiller profond, dans vendor.js, pour savoir le nom de l'attribut qu'on échoue à initialiser ?
Car je ne suis pas très sûr qu'on ait accès à ça en modification, en tout cas sans qu'il y ait un élément de sécurité qui se réveille quelque part, et le débogueur n'a pas accès ...

Dire à la fonction d'afficher ses paramètres dans la console, par exemple ...
13/12/2020, 15h10
dukoid

non pas le module, le composant !
et non faut pas bidouiller le vendor.js, ça n'apporterai rien...

si tu sais que ça viens du html alors il n'y a que tes yeux pour voir l'erreur :aie:

Admettons que bidouiller pose des problèmes.
Mais imagine que le vendor.js nous arrive au départ avec quelque chose du style :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    setAttribute(el, name, value, namespace) {
        if(#DEBUG){
             console.log("setAttribute : ");
             console.log("************* ");
             console.log("el          : " + el.toString());
             console.log("name        : " + name);
             console.log("value       : " + value.toString());
             console.log("namespace   : " + namespace.toString());
        }
        if (namespace) {
            name = namespace + ':' + name;
            // TODO(FW-811): Ivy may cause issues here because it's passing around
            // full URIs for namespaces, therefore this lookup will fail.
            const namespaceUri = NAMESPACE_URIS[namespace];
            if (namespaceUri) {
                el.setAttributeNS(namespaceUri, name, value);
            }
            else {
                el.setAttribute(name, value);
            }
        }
        else {
            el.setAttribute(name, value);
        }
    }

13/12/2020, 17h59
Gluups

Je crois qu'à notre niveau nous n'irons guère plus loin, même si je crois que je tiens une piste d'amélioration pour Angular, qui permettrait probablement d'afficher le nom de l'attribut qu'on a cherché à initialiser (objectif de temps de résolution au niveau du développeur final : cinq minutes au lieu de deux heures).
Merci aux intervenants de m'avoir aidé à lire l'existant.