web-dev-qa-db-fra.com

Erreur de syntaxe dans Angular App: Jeton inattendu <

J'ai une application Angular qui fonctionne parfaitement dans mon environnement de production et local. Après un changement minime, j'ai lancé l'application localement et tout fonctionnait bien. Ensuite, j'ai construit le projet et copié le dist dossier sur le serveur web. Le problème est que lorsque j'essaie d'accéder à l'application, l'erreur suivante s'affiche dans l'inspecteur de 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

Donc, il semble que ce soit un personnage égaré, mais dans mon environnement local, l'application fonctionne correctement. Je ne reçois aucun message d'avertissement ou d'erreur sur la console.

angularangular-cli
25
Gerardo Tarragona

Ceci est probablement le résultat d'une page 404 ou d'une redirection vers une page qui sert du code HTML normal au lieu des fichiers JavaScript attendus . (Une page HTML commence par <html> ou un <!DOCTYPE...>) Assurez-vous d'avoir correctement téléchargé les fichiers et d'accéder correctement à la page. Vous pouvez vérifier en accédant manuellement à l'URL avec le navigateur ou en consultant l'onglet Réseau des outils de développement de votre navigateur pour examiner la réponse.

13
Thomas

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

  1. J'ai exécuté la commande ng build --aot --prod
  2. Tout compilé sans erreur
  3. J'ai supprimé tous les fichiers du serveur et les ai copiés via FTP (FileZilla) sur un serveur Windows Azure.
  4. Parfois, j'obtiens l'erreur "Jeton inattendu <" et d'autres fois non

Hier, j'ai remarqué que le fichier [hash] principal .js manquait sur le serveur et que Filezilla ne m'avait pas donné d'erreur en le copiant.J'ai alors essayé de copier uniquement ce fichier.Il ne fonctionnait pas. Lorsque j'ai supprimé la partie de hachage du nom de fichier, elle est copiée sans problème.

Solution de contournement

Exécuter: ng build --aot --prod --output-hashing none

Ce qui fonctionne à chaque fois.

Par conséquent, Filezilla ou Windows Server n'autorise pas les noms de fichiers d'une longueur spécifique ou n'aime pas certains hachages.

5
Cobus Swart

obtenu cette erreur aussi bien en utilisant angulaire avec express.
Je suppose que lorsque vous construisez un projet angulaire, le projet est stocké dans 'dist/the-app' et pas simplement 'dist', ce qui a résolu mon problème sur express.

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

pour moi, cette erreur était due au fait de ne pas définir le chemin correct de l'application construite. 

4
shahidfoy

Je suis totalement nouveau dans Angular, donc cela peut ne pas aider ou du moins sembler évident à beaucoup d’entre vous, mais dans mon cas, cela se produisait chaque fois que je rechargeais une page qui ne soit pas la page racine, et cela venait du fait mon fichier index.html, la balise de base ressemblait à ceci <base href="./">, je devais supprimer le fichier. il ressemble donc à ceci: <base href="/">.

3
Zyfraglover

Dans mon cas, le <!--...--> était la cause de l'erreur

1
Sergiu Starciuc

Cela dépend du serveur sur lequel vous utilisez . Par exemple, avec Apache, vous définissez le fichier .htaccess sur un chemin relatif sur votre lecteur, où votre application se trouve avec RewriteBase. Définissez également le <base href=""> en conséquence. Avec node, la app.use(express.static(__dirname + '/dist')); devrait aller avant le app.get... Vérifiez également que la construction ne contenait aucune erreur et que tous les fichiers ont été copiés dans dist.

1
alex351

Pour une solution de contournement rapide cependant (QUI IS N'EST DEFINITIVEMENT PAS RECOMMANDE ET N'EST PAS UNE BONNE PRATIQUE) vous pouvez créer en mode non prod Essayez ng build seulement.

0
Avik

Avec un peu de changement dans le fichier .htaccess, j’ai réussi à résoudre ce problème.

J'ai remplacé certaines lignes de https://angular.io/guide/deployment#fallback par les lignes suivantes:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html
0
daerentis

D'après mon expérience, j'ajoute d'autres éléments à wwwroot qui est en conflit pour détecter l'adresse de base statique du noyau asp.net.

Par exemple:

wwwroot
      |--> assets 
                  |---> ckeditor

Est en conflit avec angular -> src -> assets Et affiche cette erreur

Uncaught SyntaxError: Unexpected token < inline.1a152b6….bundle.js:1
...
0
Moslem Shahsavan

J'ai eu le même problème, très irritant. J'ai essayé plusieurs des solutions trouvées ici, mais aucune n'a fonctionné. 

L'ajout des éléments suivants dans le panneau Paramètres de l'application de l'application dans le portail Azure a été efficace: 

Nom du paramètre d'application: WEBSITE_NODE_DEFAULT_VERSION Valeur: 6.9.1

> Avant et après - extraits du journal de déploiement.

remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 0.10.40.
remote: Selected npm version 1.4.28


remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 6.9.1.
remote: Selected npm version 3.10.8

 screen capture from Azure portal

0
Montoo

J'ai un projet d'api web et angulaire, après avoir essayé différentes manières, après avoir résolu le problème de redirection pour moi

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        //For angular url rewriting
        app.Use(async (context, next) =>
        {
            await next();
            if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        })
        .UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" } })
        .UseStaticFiles();

        app.UseAuthentication();

        app.UseMvc();
    }
0
Aqeel Qureshi

Le problème est avec la partie <base href="/"> du fichier index.html, il semble que angular génère un fichier de construction à l'intérieur de dist/{yourProjectName}/, mais les fichiers index.html passent par le dist/ pour les fichiers de construction. Maintenant vous avez 2 options:

  1. Changez la partie <base href="/"> du fichier index.html en <base href="/dist/{yourProjectName}/">, mais vous avez maintenant une incohérence entre la commande ng serve et ng build et vous ne pouvez pas voir votre projet avec ng serve. Donc, vous avez à changer cette partie à chaque fois!

  2. L'approche secondaire que je recommande est simplement de changer le chemin de sortie du projet! Accédez à votre fichier angular.json de votre projet et remplacez le "outputPath": "dist/{yourProjcetName}", par "outputPath": "dist/" sans changer le base href!

0
invisible

Il suffit d’ajouter après / le nom du dossier de votre projet, comme indiqué précédemment Gerardo Tarragona .

Exemple: 

/myProject

Cordialement

0
Alex Andrei Bastida Flores

Dans mon cas, c'était le résultat d'une saisie incorrecte de caractères UTF-8.

La syntaxe était: 

<component [inputField]="Artikelns Mått"></component>

Tout d'abord, le problème a été résolu en remplaçant le å par a. Mais ce n'est pas vraiment une solution.

Ce qui a résolu le problème, c’est d’ajouter '' autour du texte.

<component [inputField]="'Artikelns Mått'"></component>

Erreur:

Error: Template parse errors:
Parser Error: Unexpected token 'å' at column 11 in [Artikelns mått] in CadComponent@25:28 ("
    <div class="col-md-4">
        <lte-box>
            <lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
            <lte-box-body>
                <table "): CadComponent@25:28
Parser Error: Lexer Error: Unexpected character [å] at column 12 in expression [Artikelns mått] at column 13 in [Artikelns mått] in CadComponent@25:28 ("
    <div class="col-md-4">
        <lte-box>
            <lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
            <lte-box-body>
                <table "): CadComponent@25:28
    at SyntaxError.BaseError [as constructor] (webpack:///./@angular/compiler/src/facade/errors.js?:31:27) [<root>]
    at new SyntaxError (webpack:///./@angular/compiler/src/util.js?:163:16) [<root>]
    at TemplateParser.parse (webpack:///./@angular/compiler/src/template_parser/template_parser.js?:170:19) [<root>]
    at JitCompiler._compileTemplate (webpack:///./@angular/compiler/src/jit/compiler.js?:381:68) [<root>]
    at eval (webpack:///./@angular/compiler/src/jit/compiler.js?:264:62) [<root>]
    at Set.forEach (<anonymous>) [<root>]
    at JitCompiler._compileComponents (webpack:///./@angular/compiler/src/jit/compiler.js?:264:19) [<root>]
    at createResult (webpack:///./@angular/compiler/src/jit/compiler.js?:146:19) [<root>]
    at Zone.run (webpack:///./zone.js/dist/zone.js?:112:43) [<root> => <root>]
    at eval (webpack:///./zone.js/dist/zone.js?:534:57) [<root>]
    at Zone.runTask (webpack:///./zone.js/dist/zone.js?:150:47) [<root> => <root>]
    at drainMicroTaskQueue (webpack:///./zone.js/dist/zone.js?:432:35) [<root>]
0
Joel