意外的令牌 <在 Angular2 CLI 中 [英] Unexpected token < in Angular2 CLI

查看：20
本文介绍了意外的令牌 <在 Angular2 CLI 中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经构建了一个 Angular2 应用，它在我的工作和家用计算机上都可以在本地运行，但是当我尝试将它推送到 Azure 时却失败了！

所有由 ng build -prod 命令(内联、主要、polyfills 和供应商)生成的 4 个 .js 文件都在控制台中报告错误:

<块引用>

Uncaught SyntaxError: Unexpected token <

当我点击突出显示的行时，它总是在我的 index.html 页面中:

我认为这是最新版本的 CLI 中的错误或依赖性问题，但我不知道从哪里开始，因为我无法在本地复制它，即使使用 ng serve -prod

我的 package.json 文件是:

<代码>{"name": "budget.front-end",版本":0.0.0"，"许可证": "麻省理工学院",脚本":{"ng": "ng","start": "ng serve","build": "ng build","test": "ng 测试","lint": "ng lint","e2e": "ng e2e"},私人":真的，依赖关系":{"@angular/common": "^2.4.0","@angular/compiler": "^2.4.0","@angular/core": "^2.4.0","@angular/forms": "^2.4.0","@angular/http": "^2.4.0","@angular/platform-b​​rowser": "^2.4.0","@angular/platform-b​​rowser-dynamic": "^2.4.0","@angular/router": "^3.4.0","引导程序": "^3.3.7","core-js": "^2.4.1","ng2-bootstrap": "^1.4.0","rxjs": "^5.1.0","zone.js": "^0.7.6","angular2-jwt":"~0.1.28","auth0-js": "^8.3.0","auth0-lock": "^10.12.3","chart.js": "^2.5.0","ng2-charts": "^1.5.0","@types/node": "^6.0.46"},开发依赖":{"@angular/cli": "1.0.0-rc.2","@angular/compiler-cli": "^2.4.0","@types/jasmine": "2.5.38","@types/node": "~6.0.60","codelyzer": "~2.0.0","jasmine-core": "~2.5.2","jasmine-spec-reporter": "~3.2.0",业力":~1.4.1"，"karma-chrome-launcher": "~2.0.0","karma-cli": "~1.0.1","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","karma-coverage-istanbul-reporter": "^0.2.0",量角器":~5.1.0"，"ts-node": "~2.0.0","tslint": "~4.5.0",打字稿":~2.0.0"}}

我的系统是:

@angular/cli: 1.0.0-rc.2节点:6.9.1操作系统:达尔文 x64@angular/common: 2.4.9@角度/编译器:2.4.9@角度/核心:2.4.9@角度/表格:2.4.9@角度/http:2.4.9@angular/平台浏览器:2.4.9@angular/platform-b​​rowser-dynamic: 2.4.9@角度/路由器:3.4.9@angular/cli: 1.0.0-rc.2@angular/compiler-cli: 2.4.9

使用 index.html 更新

<头><meta charset="utf-8"><title>预算</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="./assets/ice-cream.png"><link rel="样式表"href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"><script src="https://cdn.auth0.com/js/lock/10.12.3/lock.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script><身体><app-root>正在加载...</app-root></html>

dist\index.html

<头><meta charset="utf-8"><title>预算</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="./assets/ice-cream.png"><link rel="样式表"href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"><script src="https://cdn.auth0.com/js/lock/10.12.3/lock.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script><link href="styles.bd88389e6ebba2f4c82b.bundle.css" rel="stylesheet"/></head><身体><app-root>正在加载...</app-root><script type="text/javascript" src="inline.176eda039efb277d0b1a.bundle.js"></script><script type="text/javascript" src="polyfills.f52c146b4f7d1751829e.bundle.js">;</script><script type="text/javascript" src="vendor.02550e5852673137ddc8.bundle.js"></script><script type="text/javascript" src="main.d7e4099a93c3c9dc1bf6.bundle.js"></script></body></html>

这是我使用 Angular 的第一个应用程序，我只是不断地遇到砖墙！

Web.config 文件，添加用于根据另一个问题解决角度路由

<预><代码><配置><system.webServer><重写><规则><清除/><!-- 忽略静态文件--><规则名称="AngularJS 条件" stopProcessing="true"><match url="(app/.*|css/.*|fonts/.*|images/.*|js/.*|node_modules/.*)"/><conditions logicalGrouping="MatchAll" trackAllCaptures="false"/><action type="None"/></规则><!-- 检查它的根 url 并导航到默认页面--><rule name="Index Request" enabled="true" stopProcessing="true"><匹配 url="^$"/><action type="Redirect" url="/home" logRewrittenUrl="true"/></规则><!--剩余所有其他 url 指向 index.html 文件--><rule name="AngularJS Wildcard" enabled="true"><match url="(.*)"/><conditions logicalGrouping="MatchAll" trackAllCaptures="false"/><action type="重写" url="index.html"/></规则></规则></rewrite></system.webServer></配置>

解决方案

web.config 的 URL 重写部分看起来有问题.它将这些文件作为您的 index.html 页面提供.

尝试用类似的东西替换你的重写部分来测试这个理论:

<conditions logicalGrouping="MatchAll"></条件><action type="Rewrite" url="/" appendQueryString="true"/></规则></规则></rewrite></system.webServer></配置>

这基本上使用 RegEx 将所有请求路由回 index.html(或根，如果您愿意)，除了我使用的静态资源(.js、.css、.png 等)

旁注:如果您还在同一个域上托管 .Net 应用程序，您可能需要修改 .Net 应用程序的路由配置或深度链接到您的 Angular 应用程序不是去上班.

您有多种选择，但由于我不知道您的要求，因此我无法推荐其中一种.你可以:

如果不需要 .Net 应用程序:

  1. 完全删除 .Net 应用程序并仅在您的 Azure 站点上托管静态文件，或者:
  2. 修改您的 Azure 站点应用程序的 [.Net] 路由配置，以将所有控制器请求重定向到您的主控制器.(IMO，这不是您的最佳选择.)

I have built an Angular2 app that works great locally on both my work and home computers but fails when I try pushing it to Azure!

All of the 4 .js files that are produced from ng build -prod command (inline, main, polyfills and vendor) report a error in the console:

Uncaught SyntaxError: Unexpected token <

When I click through the highlighted line is always in my index.html page:

<!DOCTYPE html>

I presume that this is either a bug in the latest version of CLI or a dependency issue but I don't know where to start as I can't replicate it locally, even with ng serve -prod

My package.json file is:

{
  "name": "budget.front-end",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "ng2-bootstrap": "^1.4.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6",
    "angular2-jwt":"~0.1.28",
    "auth0-js": "^8.3.0",
    "auth0-lock": "^10.12.3",
    "chart.js": "^2.5.0",
    "ng2-charts": "^1.5.0",
    "@types/node": "^6.0.46"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.2",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.0.0"
  }
}

and my system is:

@angular/cli: 1.0.0-rc.2
node: 6.9.1
os: darwin x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 2.4.9

Update with index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Budget </title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/ice-cream.png">


<link rel="stylesheet" 
  href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">

<script src="https://cdn.auth0.com/js/lock/10.12.3/lock.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">        </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

dist\index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Budget </title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./assets/ice-cream.png">


<link rel="stylesheet" 
      href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">

    <script src="https://cdn.auth0.com/js/lock/10.12.3/lock.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

<link href="styles.bd88389e6ebba2f4c82b.bundle.css" rel="stylesheet"/></head>
<body>
  <app-root>Loading...</app-root>
<script type="text/javascript" src="inline.176eda039efb277d0b1a.bundle.js"></script><script type="text/javascript" src="polyfills.f52c146b4f7d1751829e.bundle.js"></script><script type="text/javascript" src="vendor.02550e5852673137ddc8.bundle.js"></script><script type="text/javascript" src="main.d7e4099a93c3c9dc1bf6.bundle.js"></script></body>
</html>

This is my first app with Angular and I just keep running into brick walls with one thing or the other!

Web.config file, added to resolve angular routing as per another issue

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
        <clear />

        <!-- ignore static files -->
        <rule name="AngularJS Conditions" stopProcessing="true">
        <match url="(app/.*|css/.*|fonts/.*|images/.*|js/.*|node_modules/.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="None" />
        </rule>

        <!-- check if its root url and navigate to default page -->
        <rule name="Index Request" enabled="true" stopProcessing="true">
        <match url="^$" />
        <action type="Redirect" url="/home" logRewrittenUrl="true" />
        </rule>

        <!--remaining all other url's point to index.html file -->
        <rule name="AngularJS Wildcard" enabled="true">
        <match url="(.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="Rewrite" url="index.html" />
        </rule>

        </rules>
        </rewrite>
    </system.webServer>
</configuration>

解决方案

It looks like it is a problem with your URL rewrite section of your web.config. It's serving those files back as your index.html page.

Try replacing your rewrite section with something similar to this to test the thoery:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This basically uses a RegEx to route all requests back to index.html (or root, if you prefer), except for the static resources that I'm using (.js, .css, .png, etc.)

Side-Note: If you're also hosting a .Net app on this same domain, you may want to modify your .Net application's route config or deep linking to your angular app isn't going to work.

You have a few options, although since I don't know your requirements, I can't recommend one over the other. You could:

If the .Net app is not needed:

  1. Remove the .Net app entirely and just host static files on your Azure site, or:
  2. Modify your Azure site app's [.Net] route config to redirect all controller requests to your home controller. (Not really your best option, IMO.)

这篇关于意外的令牌 &lt;在 Angular2 CLI 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆