Angular App中的语法错误:意外的令牌

问题描述 投票:32回答:18

我有一个Angular应用程序,它在我的本地和生产环境中完美运行。经过我做的一个微小的改变,我在本地运行应用程序,它工作正常..然后我构建了项目并将dist文件夹复制到Web服务器。问题是,当我尝试访问该应用时,我在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

所以,它似乎是一个错位的角色,但在我的本地环境中应用程序工作正常我没有在控制台上收到任何警告或错误消息..

angular angular-cli
18个回答
19
投票

这很可能是404页面或重定向到提供常规html而不是预期的JavaScript文件的页面的结果。 (HTML页面以<html><!DOCTYPE...>开头)确保您已正确上传文件并正确访问页面。您可以通过浏览器手动访问URL进行验证,或者查看浏览器开发工具的网络选项卡以检查响应。


0
投票

根据我的经验,我将其他资产添加到wwwroot是冲突的,以检测asp.net核心的静态基地址。

例如:

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

angular -> src -> assets发生冲突并显示此错误

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

0
投票

我有同样的问题,非常恼火。我试过这里找到的几个解决方案,但都没有用。

在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


0
投票

随着.htaccess文件的一点变化,我设法解决了这个问题。

我将一些来自https://angular.io/guide/deployment#fallback的行更改为以下内容:

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

0
投票

在我的情况下,这是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 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
投票

虽然可以快速解决(确实没有推荐,也不是一个好的实践),你可以建立非生产模式。请尝试ng build


0
投票

您可以尝试将基本标记从<base href="/">更改为index.html文件中的<base href="/project-app/">


0
投票

我发现这是错误,是许多可能错误的广泛实例。在我们使用Jhipster生成项目的应用程序中,我们在index.html中添加了google analytics。我们还尝试了matomo分析。在index.html内部我们也有脚本标签。

错误是有人在您的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>

注意最后三行有<! --。这导致了我们的错误。

在index.html脚本标记中,要注释掉一行,我们使用\\双反斜杠。有人可能试图用<!-- -->评论这一行。

这很棘手,因为它可能在任何地方。 但它始终是在index.html开始的好地方

希望这有所帮助。


0
投票

我有同样的问题,并意识到我在上次部署后更改了app.use(express.static(静态文件夹))语句导致同样的unexpected token <错误。

确保app.use(express.static(static folder))语句包含js和css文件所在的相应静态文件夹以及相对于运行节点的位置。

如果您正在使用Angular和预编译(ng build --prod)您的前端Angular代码到包含这些文件的dist文件夹而不将您的后端节点文件放在同一个文件夹中(例如一个单独的后端),那么您可能需要包含正确的道路。

对于我的例子,我在项目目录中的/ dist中预编译了(ng build --prod)Angular文件。请注意,我还在预编译之前将angular.json更改为"outputPath": "dist",以确保这是预编译的Angular代码所在的位置。我刚启动节点服务器的server.js文件位于项目根目录下,但我的app.js文件包含app.use(express.static(static folder))语句和所有其余的后端节点代码,位于名为/ backend的文件夹中。在这种情况下,以下语句对我来说都适用于正确查找js和css文件并消除unexpected token <错误:

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

要么

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

两个语句都适当地指示节点在/dist文件夹中查找静态js和css文件。


0
投票
<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中的哈希不会更新,我们会收到“意外令牌错误<”。


7
投票

我遇到过同样的问题:

  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不允许具有特定长度的文件名,或者不喜欢某些哈希值。


4
投票

使用带有快速的角度也得到了这个错误。 我想当你构建一个角度项目时,项目存储在'dist / the-app'而不仅仅是'dist'中,所以这解决了我在express上的问题。

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

对我来说,这个错误是由于没有设置构建应用程序的正确路径。


3
投票

我对Angular完全不熟悉,所以它对你们很多人来说可能没什么帮助,或者至少看起来很明显,但就我而言,每当我重新加载一个不是根页面的页面时,它就会发生,而且它来自于我的index.html文件,基本标签看起来像这个<base href="./">,我不得不删除。所以它看起来像这样:<base href="/">


2
投票

问题是<base href="/">文件的index.html部分,似乎angular生成dist/{yourProjectName}/内部的构建文件,但index.html文件通过dist/进行构建文件。现在你有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

1
投票

这取决于你正在使用的服务器。例如,使用Apache,您可以将.htaccess文件设置为驱动器上的相对路径,您的应用程序位于RewriteBase。同样设置<base href="">。对于节点,app.use(express.static(__dirname + '/dist'));应该在app.get之前...检查,构建没有错误,所有文件都被复制到dist。


1
投票

在我的情况下,<!--...-->是错误的原因


0
投票

只需在/之后添加Gerardo Tarragona文件夹名称即可。

例:

/myProject

问候


0
投票

我有一个web api项目和角度,在尝试不同的方式后,我解决了重定向问题

    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();
    }
© www.soinside.com 2019 - 2024. All rights reserved.