意外的令牌<Angular2 CLI

我已经构建了一个Angular2应用程序，该应用程序在我的工作计算机和家用计算机上都很出色，但在尝试将其推送到Azure时失败！意外的令牌<Angular2 CLI

所有这一切都从ng build -prod命令生成的4个.js文件（串联，主，polyfills和供应商）在控制台报告一个错误：

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/[email protected]/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/[email protected]/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文件，添加到解决角路由按照另一个问题

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

来源

2017-03-15 Chris A

请分享index.html代码 – surajck

刚刚添加，意在包括！ –

这是post-'ng build'（dist）index.html文件吗？（看起来这是你的src - cli在ng build期间修改你的index.html以包含应用程序依赖关系。） –

它看起来就像是你的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等）

Side-Note：如果您还在同一个域中托管.Net应用程序，则可能需要修改您的.Net应用程序的路由配置或深层链接到您的角度应用程序是行不通的。

你有几个选择，虽然我不知道你的要求，但我不能推荐一个。你可以：

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

完全删除.NET应用程序，只是主机上的Azure的网站的静态文件，或：
修改您的Azure的网站应用程序的[。 Net]路由配置将所有控制器请求重定向到您的家庭控制器。（不是你最好的选择，国际海事组织。）

来源

2017-03-15 20:31:51

嗨，我试过这个代码，但是我收到“由于发生内部服务器错误，无法显示该页面。”所以进步！ –

尽管部署已成功，所以现在我想更多的是运行时错误？ –

不，我不知道，这个应用程序的后端是在不同的网址BackEndApp.Azure而不是FrontendApp.Azure。我还有其他地方可以去解决这个问题吗？ –

意外的令牌<Angular2 CLI

回答

相关问题