Как развернуть угловое приложение, чтобы оно работало по любому пути?

Это, вероятно, вопрос новичка, но я не смог найти ответы на него здесь или на англоязычной документации. Допустим, у меня есть простое приложение Angular (например, редактор героев из учебника angular.io), которое я хочу распространять, еще не зная, по какому пути оно будет работать на моем веб-сервере. Это может быть под:

Иными словами, мне нужно, чтобы сгенерированные источники (index.html и связанные с ним js-файлы, связанные с углом) полностью работали под любым путем (я думаю, поэтому относительный путь для...) в настоящее время мои сгенерированные источники работают только, если я положить их в корневой каталог моего сервера, из-за

<base href="/">

npm deploy генерируется в index.html, вероятно... Я пытался наивно изменить его на

<base href="./">

для того, чтобы мой браузер интерпретировал путь включенных файлов JS относительно index.html. При этом мой браузер правильно находит файлы JS, однако угловое приложение больше не работает (пустая страница...).
Любая идея о том, каким должен быть правильный "угловой путь" для этого? Заранее спасибо за помощь!

Источник

5 ответов

Нашел решение, которое работает для меня и не выглядит слишком уродливо:

ng build --base-href "./"
Источник

Существует также --deploy-url вариант тоже. Оба могут быть использованы вместе, но они имеют разные цели.

Насколько я могу сказать все deploy-url Переключатель добавляет этот URL к каждому загружаемому ресурсу. Например:

ng build --aot --prod --base-href=/myapp/ --deploy-url=http://cdn.example.com/

Производит это:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DEFENDER</title>
  <base href="/myapp/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="http://cdn.example.com/styles.7bb5a49e96a80c1bcc2e.css"></head>
<body>
  <rr-root></rr-root>
<script type="text/javascript" src="http://cdn.example.com/runtime.e6ffc49faae27b0b8945.js"></script><script type="text/javascript" src="http://cdn.example.com/polyfills.9a5f6d04e0781d28c53e.js"></script><script type="text/javascript" src="http://cdn.example.com/main.03ca15166b3edeff4ad4.js"></script></body>
</html>

Все еще не знаю точно, когда использовать каждый из них, но этот парень обнаружил, что совместное использование их сработало:-)

Примечание. Я не совсем уверен, как обрабатываются активы (например, изображения). Я думаю, что это только для основных файлов.js или стилей, но сейчас я делаю это только для целей тестирования.

Источник

Если вы используете угловой CLI, то:

ng build --base-href /dynamic-base-path/

Должен сделать свое дело.

Источник

Кажется, вы отредактировали сгенерированный файл .

Если вы редактируете источник index.html(перед созданием сайта) и используйте

          <base href="./">

вместо стандартного <base href="/">, это должно сработать — вы сможете скопировать содержимое папки «dist» на любой путь на вашем сервере, и это будет работать.

Я только что протестировал его (в Angular 12+ ), и он работает как с обычными производственными сборками Angular, так и с предварительно обработанными сборками Angular Universal , без каких-либо дополнительных изменений.

Кроме того, поскольку вы упомянули, что это вопрос новичка, позвольте мне подчеркнуть, что вы должны развернуть содержимое distпосле запуска одной из команд:

  • ng build-- для обычных сборок Angular Production
  • npm run prerender-- если вы используете Angular Universal

Я придумал этот ответ, потому что второй лучший, инструктирующий использовать --base-href "./"option, просто не работает с Angular Universal... поэтому общее решение, похоже, заключается в изменении index.html.

Источник

Вы можете использовать любой из следующих подходов.

  1. При развертывании по некорневому пути в домене вам необходимо вручную обновить <base href="/"> тег в вашем dist/index.html.

    В этом случае вам нужно будет обновить до <base href="/angular2-test/"> Я верю.

  2. ng build -prod --base-href \"/mysubfolder/\" работает на моем сервере без изменения оригинала в моем index.html для продолжения разработки. Вы можете просмотреть результат здесь: http://foobar.cf/calculator
Источник
Другие вопросы по тегам