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

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

问题描述

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

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!

所有4。从 ng build -prod 命令生成的js文件（inline，main，polyfills和vendor）在控制台中报告错误：

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:


未捕获的SyntaxError：意外的令牌<

Uncaught SyntaxError: Unexpected token <

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

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

<!DOCTYPE html>

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

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

我的package.json文件是：

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

我的系统是：

@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

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

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

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

Web.config文件，根据其他问题添加以解决角度路由 

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


推荐答案

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

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>

这基本上使用RegEx将所有请求路由回index.html（或root，如果您愿意的话） ），除了我正在使用的静态资源（.js，.css，.png等）

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 ：如果您还在同一个域上托管.Net应用程序，您可能需要修改您的.Net应用程序的路由配置或深度链接到您的角度应用程序不起作用。

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:

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

If the .Net app is not needed:


  1. 删除.Net应用程序完全只是托管Azure站点上的静态文件，或者：

  2. 修改Azure站点应用程序的[.Net]路由配置，将所有控制器请求重定向到您的家庭控制器。 （不是你最好的选择，IMO。）

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

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