Saya telah membangun aplikasi Angular2 yang bekerja sangat baik secara lokal di komputer kantor dan rumah saya tetapi gagal ketika saya mencoba mendorongnya ke Azure!

Semua 4 file .js yang dihasilkan dari perintah ng build -prod (inline, main, polyfills, dan vendor) melaporkan kesalahan di konsol:

SyntaxError Tidak Tertangkap: Token tak terduga <

Ketika saya mengklik garis yang disorot selalu ada di halaman index.html saya:

<!DOCTYPE html>

Saya berasumsi bahwa ini adalah bug di versi terbaru CLI atau masalah ketergantungan tetapi saya tidak tahu harus mulai dari mana karena saya tidak dapat mereplikasinya secara lokal, bahkan dengan ng serve -prod

File package.json saya adalah:

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

Dan sistem saya adalah:

@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

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

Ini adalah aplikasi pertama saya dengan Angular dan saya terus berlari ke dinding bata dengan satu atau lain hal!

File Web.config, ditambahkan untuk menyelesaikan perutean sudut sesuai masalah lain

<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>
3
Chris A 15 Maret 2017, 23:00

2 jawaban

Jawaban Terbaik

Sepertinya ada masalah dengan bagian penulisan ulang URL di web.config Anda. Ini menyajikan file-file itu kembali sebagai halaman index.html Anda.

Coba ganti bagian penulisan ulang Anda dengan sesuatu yang mirip dengan ini untuk menguji teorinya:

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

Ini pada dasarnya menggunakan RegEx untuk mengarahkan semua permintaan kembali ke index.html (atau root, jika Anda mau), kecuali untuk sumber daya statis yang saya gunakan (.js, .css, .png, dll.)

Catatan Samping: Jika Anda juga menghosting aplikasi .Net di domain yang sama ini, Anda mungkin ingin mengubah konfigurasi rute aplikasi .Net atau tautan dalam ke aplikasi sudut Anda tidak akan berfungsi .

Anda memiliki beberapa opsi, meskipun karena saya tidak tahu persyaratan Anda, saya tidak dapat merekomendasikan satu dari yang lain. Anda bisa:

Jika aplikasi .Net tidak diperlukan:

  1. Hapus aplikasi .Net seluruhnya dan cukup host file statis di situs Azure Anda, atau:
  2. Ubah konfigurasi rute [.Net] aplikasi situs Azure Anda untuk mengalihkan semua permintaan pengontrol ke pengontrol rumah Anda. (Bukan pilihan terbaik Anda, IMO.)
2
Steve Gomez 15 Maret 2017, 21:06

Ini karena pembuatan direktori proyek di dalam folder dist yang tidak ditunjuk oleh file index.html Anda. Memperbaikinya dengan mengubah tag dasar dari <base href="/">menjadi <base href="/project-app/"> di dalam file index.html.

2
Vaibhav Verma 13 Juli 2018, 18:18