Erreur de syntaxe dans une application Angular : Unxpected token <

Question

Erreur de syntaxe dans une application Angular : Unxpected token <

Demandé el 20 de Juillet, 2017: Quand la question a-t-elle été
33668 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai une application Angular qui fonctionne parfaitement dans mon environnement local et de production Après un petit changement que j'ai fait, j'ai lancé l'application localement et elle fonctionne bien Ensuite, j'ai construit le projet et copié le fichier dist sur le serveur web. Le problème est que lorsque j'essaie d'accéder à l'application, j'obtiens l'erreur suivante dans l'inspecteur Chrome :

Uncaught SyntaxError: Unexpected token < inline.1a152b6….bundle.js:1
Uncaught SyntaxError: Unexpected token < polyfills.1553fdd….bundle.js:1
Uncaught SyntaxError: Unexpected token < vendor.94d0113….bundle.js:1
Uncaught SyntaxError: Unexpected token < main.d6f56a1….bundle.js:1

Il semble donc qu'il s'agisse d'un caractère mal placé, mais dans mon environnement local, l'application fonctionne bien ; je n'obtiens aucun message d'avertissement ou d'erreur sur la console

Demandé el 20 de Juillet, 2017 par Gerardo Tarragona

0 votes

Comment avez-vous construit l'application la dernière fois ? Avec les mêmes options ?

Commenté el 20 de Juillet, 2017 par Vega

1 votes

Que dit le diff du contrôle de source

Commenté el 20 de Juillet, 2017 par Luke Hutton

0 votes

@Vega yep, ng build --prod --aot --deploy-url myApp --base-href myApp

Commenté el 20 de Juillet, 2017 par Gerardo Tarragona

Afficher 5 autres commentaires

Answer 1

5 Réponses

Answer 2

43voto

Thomas Points 1362

Il s'agit très probablement du résultat d'une page 404 ou d'une redirection vers une page qui sert du html normal au lieu des fichiers JavaScript attendus. (Une page HTML commence par <html> ou un <!DOCTYPE...> )

Vérifiez que vous avez correctement téléchargé les fichiers et que vous accédez correctement à la page. Vous pouvez vérifier en accédant manuellement à l'URL avec le navigateur ou regarder dans l'onglet réseau des outils de développement de votre navigateur pour inspecter la réponse.

Répondu el 20 de Juillet, 2017 par Thomas (1362 Points )

2 votes

Si je regarde dans l'onglet réseau de mon navigateur, je ne peux pas voir le fichier index.html . Pourtant, je peux toujours voir le fichier .js mais si je clique sur l'un de ces fichiers, le code d'indexation est affiché dans l'onglet de prévisualisation @Thomas

Commenté el 21 de Juillet, 2017 par Gerardo Tarragona

0 votes

C'est exactement ce que je voulais dire : vous avez un mauvais déploiement ou une mauvaise configuration qui sert le fichier d'index lorsqu'un fichier JS est demandé. L'hypothèse est que le déploiement n'a pas inclus les fichiers JS et que le fichier d'index est servi au cas où un fichier n'est pas trouvé.

Commenté el 21 de Juillet, 2017 par Thomas

0 votes

Ok, au moins ça a plus de sens pour moi maintenant. Mais comment se fait-il que je puisse voir ces fichiers sur mon ordinateur ? dist et ils semblent avoir leur code respectif ?

Commenté el 21 de Juillet, 2017 par Gerardo Tarragona

Afficher 4 autres commentaires

Answer 3

20voto

Cobus Swart Points 81

J'ai eu le même problème :

1) J'ai lancé la commande

ng build --aot --prod

2) Tout a été compilé sans erreur

3) J'ai supprimé tous les fichiers sur le serveur et j'ai tout copié par FTP (FileZilla) sur un serveur Windows Azure.

4) Parfois, je reçois l'erreur

Unexpected token <

et d'autres fois non

Hier, j'ai remarqué que le principal [hachage].js était manquant sur le serveur et que Filezilla ne m'a pas donné d'erreur en le copiant.

J'ai ensuite essayé de copier uniquement ce fichier, mais cela n'a pas fonctionné. Lorsque j'ai supprimé la partie hachage du nom de fichier, la copie s'est faite sans problème.

Work-a-round

Cours :

ng  build --aot --prod --output-hashing none

Ce qui fonctionne à chaque fois.

Donc, soit Filezilla ou Windows Server n'autorise pas les noms de fichiers d'une longueur spécifique, soit il n'aime pas certains hashs.

Répondu el 23 de Mai, 2018 par Cobus Swart (81 Points )

1 votes

Cela a réglé le problème pour moi.

Commenté el 29 de Mai, 2018 par eertl

14 votes

La suppression du hash est un gros problème pour le cache

Commenté el 4 de Mars, 2019 par izik f

0 votes

C'est exactement le problème que j'ai, après avoir vu cela, j'ai remarqué qu'il y a quelques fichiers dans la fenêtre d'échec de téléchargement. quel est le problème avec Filezilla ?

Commenté el 29 de Juin, 2020 par yww325

Afficher 1 autres commentaires

Answer 4

9voto

shahidfoy Points 180

J'ai également obtenu cette erreur en utilisant Angular avec Express.

Je suppose que lorsque vous construisez un projet angulaire, le projet est stocké dans ' dist/the-app et pas seulement dist Cela a donc résolu mon problème en express.

// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist/the-app')));

pour moi, cette erreur était due au fait que je n'avais pas défini le bon chemin de l'application construite.

Répondu el 8 de Octobre, 2018 par shahidfoy (180 Points )

0 votes

La même chose s'est produite dans mon cas. Merci.

Commenté el 31 de Décembre, 2018 par Sachin Parashar

Answer 5

6voto

meshkati Points 198

Le problème se situe au niveau de la <base href="http://stackoverflow.com/"> partie de index.html il semble qu'angular génère un fichier de construction à l'intérieur de dist/{yourProjectName}/ mais le index.html passe par le dist/ pour les fichiers de construction. Maintenant vous avez 2 options :

Changez le <base href="http://stackoverflow.com/"> partie de la index.html pour <base href="http://stackoverflow.com/dist/{yourProjectName}/"> mais maintenant vous avez une incohérence entre le ng serve et ng build et vous ne pouvez pas voir votre projet à travers ng serve . Vous devez donc changer cette partie à chaque fois !
La deuxième approche que je recommande, est de changer le chemin de sortie du projet ! Allez dans votre angular.json de votre projet et modifiez le fichier "outputPath": "dist/{yourProjcetName}", à "outputPath": "dist/" et ne changez pas le base href !

Répondu el 18 de Janvier, 2019 par meshkati (198 Points )

Answer 6

4voto

Zyfraglover Points 178

Je suis totalement novice en Angular, donc il se peut que cela ne soit pas utile ou du moins que cela semble évident pour beaucoup d'entre vous, mais dans mon cas, cela se produisait chaque fois que je rechargeais une page qui n'était pas la page racine, et cela provenait du fait que, dans mon fichier index.html la balise de base ressemblait à ceci <base href="./"> j'ai dû enlever le . donc ça ressemble à ça : <base href="http://stackoverflow.com/"> .

Répondu el 13 de Novembre, 2018 par Zyfraglover (178 Points )

0 votes

A fonctionné pour moi aussi, sauf que mon application était dans 'apps/my-app' et que j'ai dû spécifier <base href="http://stackoverflow.com/apps/my-app/">

Commenté el 18 de Décembre, 2018 par vt5491

1 votes

Ou utilisez ng build --base-href='http://stackoverflow.com/apps/my-app/' Note : la fermeture et la fin du "/" sont importantes.

Commenté el 18 de Décembre, 2018 par vt5491

Erreur de syntaxe dans une application Angular : Unxpected token <

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Erreur de syntaxe dans une application Angular : Unxpected token &lt;

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by:

Erreur de syntaxe dans une application Angular : Unxpected token <