webentwicklung-frage-antwort-db.com.de

Syntaxfehler in Angular App: Unerwartetes Token <

Ich habe eine Angular App, die perfekt in meiner lokalen und Produktionsumgebung läuft. Nach einer kleinen Änderung, die ich vorgenommen habe, habe ich die App lokal ausgeführt und sie funktioniert einwandfrei. Dann habe ich das Projekt erstellt und das kopiert. dist Ordner zum Webserver. Wenn ich versuche, auf die App zuzugreifen, wird im Chrome Inspector der folgende Fehler angezeigt:

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

Es scheint also, dass es sich um ein falsch platziertes Zeichen handelt, aber in meiner lokalen Umgebung funktioniert die App einwandfrei. Ich erhalte keine Warnung oder Fehlermeldung auf der Konsole.

25

Dies ist höchstwahrscheinlich das Ergebnis einer 404-Seite oder einer Weiterleitung zu einer Seite, die reguläre HTML-Dateien anstelle der erwarteten JavaScript-Dateien bereitstellt. (Eine HTML-Seite beginnt mit <html> oder einem <!DOCTYPE...>.) .__ Laden Sie die Dateien hoch und greifen Sie richtig auf die Seite zu. Sie können dies überprüfen, indem Sie manuell mit dem Browser auf die URL zugreifen, oder überprüfen Sie die Antwort auf der Registerkarte "Netzwerk" Ihrer Browser-Entwicklungstools.

13
Thomas

Ich hatte das gleiche Problem:

  1. Ich habe den Befehl ng build --aot --prod ausgeführt
  2. Alles ohne Fehler kompiliert
  3. Ich habe alle Dateien auf dem Server gelöscht und alles per FTP (FileZilla) auf einen Windows Azure-Server kopiert
  4. Manchmal bekomme ich die Fehlermeldung "Unerwartetes Token <" und manchmal nicht

Gestern fiel mir auf, dass die main [hash] .js auf dem Server fehlte und Filezilla mir beim Kopieren keine Fehlermeldung gab. Ich habe dann versucht, nur diese Datei zu kopieren. Wenn ich den Hash-Teil aus dem Dateinamen entfernte, wird er ohne Probleme kopiert.

Runde arbeiten

Run: ng build --aot --prod --output-hashing kein

Was immer funktioniert.

Daher erlaubt Filezilla oder Windows Server keine Dateinamen mit einer bestimmten Länge oder bestimmte Hashes mögen nicht.

5
Cobus Swart

diesen Fehler habe ich auch bei der Verwendung von eckig mit express erhalten.
Ich denke, wenn Sie ein Winkelprojekt erstellen, wird das Projekt in 'dist/the-app' gespeichert, nicht nur in 'dist'. Dies löste mein Problem auf Express.

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

für mich war dieser Fehler darauf zurückzuführen, dass der richtige Pfad der erstellten Anwendung nicht festgelegt wurde. 

4
shahidfoy

Ich bin völlig neu bei Angular, daher mag es für viele von Ihnen nicht hilfreich sein oder zumindest offensichtlich erscheinen, aber in meinem Fall passierte es jedes Mal, wenn ich eine Seite neu lade, die nicht die Startseite ist meine index.html-Datei, das Basis-Tag sah so aus <base href="./">, ich musste das entfernen. so sieht es so aus: <base href="/">.

3
Zyfraglover

In meinem Fall war der <!--...--> die Fehlerursache

1
Sergiu Starciuc

Das hängt von dem Server ab, den Sie verwenden ..__ Mit Apache setzen Sie die .htaccess-Datei auf einen relativen Pfad auf Ihrem Laufwerk, in dem sich Ihre App mit RewriteBase befindet. Stellen Sie auch den <base href=""> entsprechend ein. Mit node sollte app.use(express.static(__dirname + '/dist')); vor app.get____ gehen. Überprüfen Sie auch, ob der Build fehlerfrei ist und alle Dateien in dist kopiert wurden.

1
alex351

Sie können versuchen, das Basis-Tag in der Datei index.html von <base href="/"> In <base href="/project-app/"> Zu ändern.

0
emrebaris

Für eine schnelle Problemumgehung (DIE IS ENDGÜLTIG NICHT EMPFOHLEN IST UND KEINE GUTE PRAXIS IST) können Sie im Nicht-Modus-Modus erstellen. Versuchen Sie nur ng build.

0
Avik

Mit einer kleinen Änderung in der .htaccess-Datei konnte ich dieses Problem beheben.

Ich habe einige Zeilen von https://angular.io/guide/deployment#fallback in folgende Zeile geändert:

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

Nach meiner Erfahrung füge ich weitere Assets zu wwwroot hinzu, um die statische Basisadresse für den asp.net-Kern zu ermitteln.

Zum Beispiel:

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

Ist ein Konflikt mit angular -> src -> assets Und zeigt diesen Fehler

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

Ich hatte das gleiche Problem, sehr ärgerlich. Ich habe mehrere der hier gefundenen Lösungen ausprobiert, aber keine hat funktioniert. 

Das Hinzufügen des Folgenden im Blatt "Anwendungseinstellungen" der Anwendung im Azure-Portal hat den Trick bewirkt: 

Name der Anwendungseinstellung: WEBSITE_NODE_DEFAULT_VERSION Wert: 6.9.1

> Vorher und Nachher - Auszüge aus dem Bereitstellungsprotokoll.

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

Ich fand, dass dies ein weites Beispiel für viele mögliche Fehler ist. In unserer Anwendung, in der ein von Jhipster generiertes Projekt verwendet wurde, haben wir der index.html Google Analytics hinzugefügt. Wir haben auch Matomo Analytics ausprobiert. In der index.html haben wir auch Skript-Tags.

Der Fehler war, dass jemand eine Codezeile in unserem Google Analytics-Snippet auskommentierte.

hier ist ein Beispiel für den Code, in dem der Fehler aufgetreten ist:

<script>
        (function (b, o, i, l, e, r) {
            b.GoogleAnalyticsObject = l;
            b[l] || (b[l] =
                function () {
                    (b[l].q = b[l].q || []).Push(arguments)
                });
            b[l].l = +new Date;
            e = o.createElement(i);
            r = o.getElementsByTagName(i)[0];
            e.src = '//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e, r)
        }(window, document, 'script', 'ga'));
        ga('create', '123123'); <! --
        ga('send', 'pageview');
        -->

    </script>

Beachten Sie die letzten drei Zeilen, in denen <! -- Stand. Das verursacht den Fehler für uns.

In index.html script Tag verwenden wir zum Auskommentieren einer Zeile den doppelten Backslash \\. Möglicherweise hat jemand versucht, diese Zeile mit <!-- --> Zu kommentieren.

Das ist knifflig, denn es hätte überall sein können.
Aber es ist immer ein guter Ort, um im index.html Zu beginnen.

Hoffe das hilft ein wenig.

0
Gel Sisaed

Gemessen an der Anzahl der Antworten kann dieses Problem aus einer Vielzahl von Gründen auftreten.

Ich werde meine hinzufügen, falls es anderen hilft. In meinem Fall habe ich versucht, eine URL, die ich zurück zu index.html weiterleiten wollte, direkt aufzurufen und Angular damit umgehen zu lassen.

Also, wenn ich zu http://example.com/some-angular-route/12345 ging

Auf der Registerkarte "Netzwerk" habe ich festgestellt, dass die Skripte mit der Route angular in der URL (http://example.com/some-angular-route/runtime.js) bereitgestellt wurden.

Da nginx /some-angular-route/runtime.js nicht finden konnte, fiel es natürlich zurück, index.html zu liefern, da ich try_files (in der nginx-Konfiguration) gesetzt habe, um zuerst $ uri zu testen, und wenn dies nicht möglich war finde es nicht, diene index.html. Also im Wesentlichen:

  • index.html hat ein Skript-Tag, das versucht, http://example.com/some-angular-route/runtime.js zu laden
  • ein Fallback in nginx config dient index.html, wenn die Datei nicht aufgelöst werden kann
  • der Inhalt von runtime.js ist jetzt der gleiche wie der von index.html, der mit <html> beginnt.
  • Da das js nicht gültig ist, bekommst du Uncaught SyntaxError: Unexpected token <

Wie erhalten wir also /some-angular-route/ aus der URL für runtime.js? Wir müssen sicherstellen, dass Sie base-href auf / gesetzt haben. Sie können dies vom CLI aus mit dem Flag --base-href=/ tun.

Dieses Flag wird in Ihr head-Tag von index.html eingefügt und zwingt den Browser, alle Skripte aus dem Stammverzeichnis der Site aufzulösen. Sie können sich in einer URL befinden, die some-angular-route enthält, aber eine Datei wie runtime.js (eine relative URL) aus / laden.

0
Matt Jones

Ich habe ein Web-API-Projekt und eckig, nachdem ich verschiedene Wege ausprobiert und das Problem der Umleitung gelöst habe

    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

Das Problem ist mit dem <base href="/">-Teil der index.html-Datei, es scheint, dass die Build-Datei in dist/{yourProjectName}/ von eckig erzeugt wird, aber die index.html-Dateien durchlaufen den dist/ für Builddateien. Jetzt haben Sie 2 Möglichkeiten:

  1. Ändern Sie den <base href="/">-Teil der index.html-Datei in <base href="/dist/{yourProjectName}/">, aber Sie haben jetzt Inkonsistenz zwischen dem ng serve-Befehl und ng build und können Ihr Projekt nicht durch ng serve sehen. Sie müssen diesen Teil also jedes Mal ändern!

  2. Der zweite Ansatz, den ich empfehle, besteht darin, den Ausgabepfad des Projekts zu ändern! Gehen Sie zu Ihrer angular.json-Datei Ihres Projekts und ändern Sie den "outputPath": "dist/{yourProjcetName}", in "outputPath": "dist/". Ändern Sie nicht den base href!

0
invisible

Ich hatte das gleiche Problem und stellte fest, dass ich die Anweisung app.use (express.static (statischer Ordner)) nach meiner letzten Bereitstellung geändert hatte, was denselben unexpected token < - Fehler verursachte.

Stellen Sie sicher, dass Ihre app.use(express.static(static folder)) -Anweisung den entsprechenden statischen Ordner enthält, in dem sich Ihre js- und css-Dateien befinden und der sich auf den Knoten bezieht, auf dem Sie ausgeführt werden.

Wenn Sie Angular und Vorkompilieren (ng build --prod) Ihres Front-Ends Angular) in einem dist-Ordner verwenden, der diese Dateien enthält, und nicht Ihre Back-End-Knotendateien im selben Ordner (z. B. ein separates Back-End), müssen Sie möglicherweise auch den richtigen Pfad angeben.

In meinem Beispiel habe ich meine vorkompilierten (ng build --prod) Angular= Dateien in/dist direkt außerhalb des Projektverzeichnisses. Beachten Sie, dass ich angle.json ebenfalls auf "outputPath": "dist" vor dem Vorkompilieren, um sicherzustellen, dass der vorkompilierte Angular) Code dort abgelegt wird. Meine server.js-Datei, die gerade den Knotenserver startet, befindet sich im Projektstamm, meine app.js-Datei dagegen im Stammverzeichnis enthält die app.use(express.static(static folder)) -Anweisung und der gesamte Rest meines Back-End-Knotencodes befindet sich in einem Ordner mit dem Namen/backend. Die folgenden Anweisungen funktionieren in diesem Fall für mich beide, um die js- und css-Dateien korrekt zu finden und die zu beseitigen unexpected token < Fehler:

  app.use(express.static(path.join('dist')));

oder

  app.use(express.static(path.join(__dirname, '../dist')));

Beide Anweisungen weisen den Knoten an, nach den statischen js- und css-Dateien im Ordner /dist Zu suchen.

0
lioncrazed

Fügen Sie einfach nach / den Ordnernamen Ihres Projekts hinzu, wie bereits gesagt Gerardo Tarragona .

Beispiel: 

/myProject

Grüße

In meinem Fall war dies das Ergebnis einer falschen Eingabe von UTF-8-Zeichen.

Syntax war: 

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

Zunächst wurde das Problem gelöst, indem einfach å durch a ersetzt wurde. Aber das ist nicht wirklich eine Lösung.

Was gelöst wurde, war das Hinzufügen von '' um den Text.

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

Error:

Error: Template parse errors:
Parser Error: Unexpected token 'å' at column 11 in [Artikelns mått] in [email protected]:28 ("
    <div class="col-md-4">
        <lte-box>
            <lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
            <lte-box-body>
                <table "): [email protected]:28
Parser Error: Lexer Error: Unexpected character [å] at column 12 in expression [Artikelns mått] at column 13 in [Artikelns mått] in [email protected]:28 ("
    <div class="col-md-4">
        <lte-box>
            <lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
            <lte-box-body>
                <table "): [email protected]: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