个人中心
gpt4 book ai didi

javascript - Angular2 CLI 中出现意外标记 <

转载 作者：太空狗 更新时间：2023-10-29 18:31:37 25 4
gpt4 key购买 nike

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

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

Uncaught SyntaxError: Unexpected token <

当我点击突出显示的行时，该行始终位于我的 index.html 页面中:

<!DOCTYPE html>

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

我的 package.json 文件是:

{
  "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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671409140910" rel="noreferrer noopener nofollow">[email protected]</a>/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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c3dec3dec7" rel="noreferrer noopener nofollow">[email protected]</a>/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 的应用程序，但我总是遇到这样或那样的问题!

添加 Web.config 文件以解决另一个问题的 Angular 路由

<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 的 URL 重写部分出现问题。它将这些文件作为您的index.html 页面返回。

尝试用类似的内容替换重写部分来测试理论:

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

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

旁注:如果您还在同一域上托管 .Net 应用程序，您可能需要修改 .Net 应用程序的路由配置，否则无法深层链接到您的 Angular 应用程序去上类了。

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

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

  1. 完全删除 .Net 应用，仅在 Azure 站点上托管静态文件，或者:
  2. 修改 Azure 站点应用的 [.Net] 路由配置，以将所有 Controller 请求重定向到您的家庭 Controller 。 (在我看来，这并不是你最好的选择。)

关于javascript - Angular2 CLI 中出现意外标记 <，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42819588/

25 4 0
文章推荐： c# - 将巨大的 longs 数组写入磁盘
文章推荐： python - 3.x 中的 "join"是否变慢？
文章推荐： c# - 性能计数器 NextValue() 非常慢(1,000 多个计数器)
文章推荐： c# - 为什么 ReadOnlyCollection 不允许协方差？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com