Uncaught (in promise): InvalidCharacterError

**Gluups** · 13/12/2020, 06h06

Bonjour tout le monde,

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

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.

**krakatoa** · 13/12/2020, 13h02

il y a que ça ?

tu peux mettre toute l'erreur stp

**Gluups** · 13/12/2020, 13h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Erreur lors du chargement de cet URI : Unknown source

**krakatoa** · 13/12/2020, 13h56

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

(2) compile en mode prod pour voir :
ng build --prod

**Gluups** · 13/12/2020, 14h17

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.

**dukoid** · 13/12/2020, 14h25

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

**Gluups** · 13/12/2020, 14h29

Plus exactement dans le HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**dukoid** · 13/12/2020, 14h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Gluups** · 13/12/2020, 14h40

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.

**dukoid** · 13/12/2020, 14h52

WeatherComponent, Template et setAttribute

"template" veut dire que c'est du coté HTML

**Gluups** · 13/12/2020, 14h58

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 ...

**dukoid** · 13/12/2020, 15h10

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

**Gluups** · 13/12/2020, 15h36

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
        }
    }

**Gluups** · 13/12/2020, 17h59

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.

Uncaught (in promise): InvalidCharacterError

Angular

Discussions similaires

Partager

Partager