構建不會在 public_html 的根目錄中運行的 Angular 應用程序

Question

我實現了一個常規的 angular 應用程序。 問題是它不會在域的根目錄中運行，而是在子文件夾中運行。 當我生成應用程序時，index.html 看起來像：

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <title>Backend</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.fc351d6e19ae3ad0f023.css"></head>
<body>
    <app>Loading...</app>
<script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"></script><script src="polyfills-es2015.7784ace277a2ec6cc920.js" type="module"></script><script src="runtime-es5.741402d1d47331ce975c.js" nomodule></script><script src="polyfills-es5.ae350e3469dc8aba722c.js" nomodule></script><script src="scripts.73905d6ee8dce4ede414.js"></script><script src="main-es2015.e77f6ad52f12c15144d3.js" type="module"></script><script src="main-es5.a7f7a3ca564e8841fd71.js" nomodule></script></body>
</html>

問題是腳本和 styles 沒有加載，因為這些是在根目錄下搜索的。 我嘗試更改基本節點，但它不起作用。 因此，每次構建時，我都必須使用這些文件的完整路徑來編輯 index.html 文件。 喜歡：

<!DOCTYPE html>
<html>
<head>
    <base href="https://demo.com/backend/" />
    <title>Backend</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://demo.com/backend/styles.fc351d6e19ae3ad0f023.css"></head>
<body>
    <app>Loading...</app>
<script src="https://demo.com/backend/runtime-es2015.858f8dd898b75fe86926.js" type="module"></script><script src="https://demo.com/backend/polyfills-es2015.7784ace277a2ec6cc920.js" type="module"></script><script src="https://demo.com/backend/runtime-es5.741402d1d47331ce975c.js" nomodule></script><script src="https://demo.com/backend/polyfills-es5.ae350e3469dc8aba722c.js" nomodule></script><script src="https://demo.com/backend/scripts.73905d6ee8dce4ede414.js"></script><script src="https://demo.com/backend/main-es2015.e77f6ad52f12c15144d3.js" type="module"></script><script src="https://demo.com/backend/main-es5.a7f7a3ca564e8841fd71.js" nomodule></script></body>
</html>

關於如何自動或以優雅的方式進行此類更改的任何想法？ TIA

Answer 1

您可以使用 web 服務器將請求的 url 重新映射到您想要的任何物理文件夾/文件。 首先將您的 angular 應用程序放在 web 服務器不提供服務的文件夾中。 然后，使用 ASP.NET 內核，您可以像這樣制作 controller：

[Route("[controller]/{*catchall}")]
public IActionResult CatchAll(string catchall)
{
    // convert url to physical file path
    string file = Path.Combine(folderForAngularApp, catchall);

    // retrive the physical file and return it using the correct type
    string suffix = Path.GetExtension(file).ToLower();
    switch (suffix)
    {
      case ".js": return PhysicalFile(file, "text/javascript");
      case ".html": return PhysicalFile(file, "text/html");
      case ".css": return PhysicalFile(file, "text/css");
      default: return NotFound();
    }
  }
}

通過這種方式，您還可以控制對您的 SPA 的訪問，即只允許經過身份驗證的用戶下載它。

構建不會在 public_html 的根目錄中運行的 Angular 應用程序

問題描述

1 個解決方案

解決方案1
0 2020-08-03 22:24:57

構建不會在 public_html 的根目錄中運行的 Angular 應用程序

問題描述

1 個解決方案

解決方案1 0 2020-08-03 22:24:57

解決方案1
0 2020-08-03 22:24:57