Ошибка синтаксиса в Angular App: Неожиданный токен <

У меня есть приложение Angular, которое отлично работает в моей локальной и производственной среде. После небольшого изменения, которое я сделал, я запускал приложение локально, и он отлично работает. Затем я построил проект и скопировал папку dist на веб-сервер. Проблема в том, что когда я пытаюсь получить доступ к приложению, я получаю следующую ошибку в Chrome Inspector:

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

Итак, похоже, что это неулокальный персонаж, но в моей локальной среде приложение отлично работает, я не получаю предупреждение или сообщение об ошибке на консоли.

ОТВЕТЫ

Ответ 1

Скорее всего, это результат 404 страницы или перенаправления на страницу, которая обслуживает обычный html вместо ожидаемых файлов JavaScript. (HTML-страница начинается с <html> или <!DOCTYPE...>)

Убедитесь, что вы правильно загрузили файлы и получите доступ к странице правильно. Вы можете проверить это, вручную открыв URL-адрес в браузере, или просмотрите вкладку сети инструментов разработки браузера, чтобы проверить ответ.

Ответ 2

У меня была такая же проблема:

1) Я управлял командой

ng build --aot --prod

2) Все скомпилировано без ошибок

3) Я удалил все файлы на сервере и скопировал их через FTP (FileZilla) на сервер Windows Azure.

4) Иногда я получаю ошибку

Unexpected token <

а иногда нет

Вчера я заметил, что основной [hash].js отсутствует на сервере и что Filezilla не выдала мне ошибки при его копировании.

Затем я попытался скопировать только этот файл. Это не сработало. Когда я удалил часть хеша из имени файла, он скопировал без проблем.

Работа круглая

Бежать:

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

Который работает каждый раз.

Таким образом, либо Filezilla, либо Windows Server не разрешают имена файлов определенной длины или не любят определенные хэши.

Ответ 3

Получил эту ошибку, также используя угловые с экспресс.

Я предполагаю, что когда вы создаете угловой проект, проект хранится в " dist/the-app ", а не просто " dist ", так что это решило мою проблему в экспрессе.

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

для меня эта ошибка произошла из-за неправильной установки правильного пути встроенного приложения.

Ответ 4

Я полностью новичок в Angular, поэтому это может не помочь или, по крайней мере, показаться очевидным для многих из вас, но в моем случае это происходило каждый раз, когда я перезагружал страницу, а не корневую страницу, и это происходило из-за того, что в В моем файле index.html базовый тег выглядел примерно так: <base href="./">, мне пришлось удалить. так это выглядит так: <base href="/">.

Ответ 5

Проблема dist/{yourProjectName}/ частью <base href="/"> файла index.html, похоже, что angular генерирует файл сборки внутри dist/{yourProjectName}/ но файлы index.html проходят через dist/ for файлы сборки. Теперь у вас есть 2 варианта:

  1. Измените <base href="/"> часть файла index.html на <base href="/dist/{yourProjectName}/"> но теперь у вас есть несоответствие между командой ng serve и ng build и вы не можете увидеть ваш проект через ng serve. Таким образом, вы должны изменить эту часть каждый раз!

  2. Второй подход, который я рекомендую, это просто изменение пути вывода проекта! Перейдите к файлу angular.json вашего проекта и измените "outputPath": "dist/{yourProjcetName}", на "outputPath": "dist/" и не изменяйте base href !

Ответ 6

Это зависит от сервера, который вы используете. Например, в Apache вы устанавливаете для файла .htaccess относительный путь на вашем диске, где ваше приложение находится в RewriteBase. Также установите <base href=""> соответственно.

С узлом

app.use(express.static(__dirname + '/dist'));

должен идти до app.get.

Также проверьте, что в сборке не было ошибок и все файлы были скопированы в dist.

Ответ 7

В моем случае причиной ошибки была <!--...-->

Ответ 8

Вы можете попробовать изменить базовый тег с <base href="/"> на <base href="/project-app/"> внутри файла index.html.

Ответ 9

Просто добавьте после / имя папки вашего проекта, как указано Херардо Таррагона.

Пример:

/myProject

Привет

Ответ 10

У меня есть проект webapi и angular, после разных способов, после устранения проблемы перенаправления для меня

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

Ответ 11

По моему опыту, я добавляю другие ресурсы в wwwroot, чтобы определить статический базовый адрес для ядра asp.net.

Например:

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

Конфликтует с angular → src → assets и показывает эту ошибку

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

Ответ 12

У меня была такая же проблема, очень раздражающая. Я попробовал несколько решений, найденных здесь, но ни одно из них не сработало.

Добавление следующего в блейд Application Settings приложения на портале Azure добилось цели -

Имя настройки приложения: WEBSITE_NODE_DEFAULT_VERSION Значение: 6.9.1

> До и после - выдержки из журнала развертывания.

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

Ответ 13

С небольшим изменением в файле .htaccess мне удалось исправить эту проблему.

Я изменил некоторые строки из https://angular.io/guide/deployment#fallback на следующие:

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

Ответ 14

В моем случае это было результатом неправильного ввода символов UTF-8.

Синтаксис был:

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

Сначала это было решено просто заменой å a. Но это не совсем решение.

Что решило это, так это добавив '' вокруг текста.

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

Ошибка:

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

Ответ 15

Тем не менее, для быстрого обхода проблемы (КОТОРОЕ НЕ РЕКОМЕНДУЕТСЯ И НЕ ХОРОШАЯ ПРАКТИКА) вы можете создать режим без поддержки. Попробуйте только ng build.

Ответ 16

Я обнаружил, что это ошибка, являющаяся широким примером множества возможных ошибок. В нашем приложении, которое использовало проект, сгенерированный Jhipster, мы добавили Google Analytics в index.html. Мы также попробовали аналитику матомо. Внутри index.html у нас также есть теги script.

Ошибка состояла в том, что кто-то закомментировал строку кода в нашем фрагменте Google Analytics.

Вот пример кода, где жила ошибка:

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

Ответ 17

У меня была та же проблема, и я понял, что изменил инструкцию app.use(express.static (статическая папка)) после моего последнего развертывания, вызвав тот же unexpected token < ошибка.

Убедитесь, что ваш app.use(express.static(static folder)) содержит соответствующую статическую папку, в которой находятся ваши файлы js и css относительно места, где вы запускаете узел.

Если вы используете Angular и прекомпилируете (ng build --prod) свой код Angular ng build --prod интерфейса в папку dist, содержащую эти файлы, а не помещаете файлы своего внутреннего узла в одну и ту же папку (например, в отдельный бэкэнд), необходимо также указать правильный путь.

Для моего примера у меня есть предварительно скомпилированные (ng build --prod) угловые файлы в /dist прямо из каталога проекта. Обратите внимание, что я также изменил angular.json на "outputPath": "dist" перед прекомпиляцией, чтобы убедиться, что именно туда должен идти скомпилированный код Angular. Мой файл server.js, который только запускает сервер узла, находится в корне проекта, но мой файл app.js, который содержит app.use(express.static(static folder)) и весь остальной код моего внутреннего узла находится в папке /backend. Следующие операторы в этом случае работают для меня, чтобы правильно найти файлы js и css и устранить unexpected token < error:

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

или же

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

Оба оператора соответственно направляют узел для поиска статических файлов js и css в папке /dist.

Ответ 18

Судя по количеству ответов, эта проблема может появиться по целому ряду причин.

Я добавлю мое, если это поможет другим. В моем случае я пытался напрямую попасть по URL-адресу, который я хотел переслать обратно в index.html, и позволить Angular обработать его.

Так что, если я пошел в http://example.com/some-angular-route/12345

На вкладке сети я заметил, что он обслуживает сценарии с угловым маршрутом в URL (http://example.com/some-angular-route/runtime.js)

Естественно, поскольку nginx не смог найти /some-angular-route/runtime.js, он вернулся к службе index.html, поскольку я установил try_files (в конфигурации nginx) для проверки $ uri в первую очередь и, если не смог его найти, служил index. HTML. Итак, по сути:

  • index.html имеет тег сценария, который пытается загрузить http://example.com/some-angular-route/runtime.js
  • Откат в конфигурации nginx служит index.html, когда он не может разрешить файл
  • содержимое runtime.js теперь совпадает с index.html, который начинается с <html>
  • Так как это недействительно, вы получите Uncaught SyntaxError: Unexpected token <

Итак, как мы получаем /some-angular-route/ из URL для runtime.js? Мы должны убедиться, что у вас base-href установлено значение /. Вы можете сделать это из кли с флагом --base-href=/

Этот флаг добавит в ваш заголовочный тег index.html и заставит браузер разрешить все скрипты из корня сайта. Вы можете использовать URL-адрес, включающий some-angular-route, но загрузить файл, такой как runtime.js (который является относительным URL-адресом) из /.

Ответ 19

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

добавить вышеуказанные строки в index.html

Причина: Chrome кэширует index.html, поэтому хеш в main.hash.js не обновляется, и мы получаем "неожиданную ошибку токена <".

Ответ 20

Я решил, изменив в index.html

<base href="/">

в

<base href=".">