Создание приложения Angular, которое не будет работать в root public_html - PullRequest
Новая
       20

Создание приложения Angular, которое не будет работать в root public_html

0 голосов
/ 03 августа 2020

Я реализовал обычное приложение angular. Проблема в том, что он запускается не в root домена, а в подпапке. Когда я создаю приложение, 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>

И проблема в том, что скрипты и стили не загружаются, так как они ищутся в root. Я попытался изменить базовый узел, но это не сработало. Поэтому каждый раз, когда я создаю, мне приходится редактировать файл 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

1 Ответ

0 голосов
/ 04 августа 2020

Вы можете использовать свой веб-сервер для переназначения запрошенного URL-адреса на любую физическую папку / файл, который вы хотите. Сначала поместите приложение angular в папку, не обслуживаемую вашим веб-сервером. Затем, используя ASP. NET Core, вы можете создать такой контроллер: 

[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, ie разрешая только авторизованным пользователям загружать его.

...