意外的令牌<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

回答

相關問題