Angular 9 Build Bundle Directory - PullRequest
Новая
       0

Angular 9 Build Bundle Directory

2 голосов
/ 19 февраля 2020

Я пытаюсь настроить мою Angular 9 сборку для вывода стиля и комплектов скриптов в заданную c подпапку (например, "app") и иметь индекс. html использует эти пути в своих ссылках на расслоения. Я нашел некоторую старую и некоторую противоречивую информацию по этому вопросу, но пока что ничего не произошло. CLI Angular часто и значительно обновлялся, и подходы могли измениться. Я хочу сделать это в angular.json, а не с любым типом сценария пост-сборки, флагом CLI и т. Д. c., Чтобы я мог поддерживать это в исходном коде.

Любая помощь будет оценена! Спасибо!

enter image description here

Ответы [ 2 ]

3 голосов
/ 24 февраля 2020

В вашем angular.json измените следующую конфигурацию сборки, он переместит перенесенные файлы машинописи в папку static. 

"outputPath": "dist/<project>/static",
"deployUrl": "static/",
"index": {
    "input": "src/index.html",
    "output": "../index.html"
},

enter image description here

Для структурирования активов используйте следующую конфигурацию 

"assets": [
    {
        "glob": "**/*",
        "input": "src/assets/",
        "output": "./../assets/"
    },
    {
        "glob": "favicon.ico",
        "input": "src/",
        "output": "./../"
    }
],
2 голосов
/ 11 марта 2020

Я не уверен, что такое правильный этикет, но я не могу вставить все эти шаги в комментарий к существующему ответу. Все заслуги за этот ответ принадлежат Акиле sh Кумар. Без его помощи я бы не стал этим заниматься, так что большое спасибо. Я буду рад отметить ваш ответ как правильный для кредита, если это способ сделать это. Для тех, кто смотрит на это, этот ответ может быть немного более сфокусированным и «в одном месте».

Эти шаги были выполнены с Angular CLI 9.0.5. Это решение только демонстрирует один общий способ настроить это. Вы можете изменить это для каждой конфигурации, если хотите.

  1. Выполнить ng new TestApp. Примите любые значения по умолчанию, если будет предложено.

  2. Запустите ng build, чтобы увидеть базовый результат перед внесением каких-либо изменений. Все файлы находятся в одном каталоге.

    enter image description here

  3. Откройте папку TestApp в своем любимом редакторе.

  4. В angular. json -> проекты -> TestApp -> architect -> build -> options, добавить или изменить эти записи: 

    "deployUrl": "assets/",
"outputPath": "dist/TestApp/assets",
"index": {
  "input": "src/index.html",
  "output": "../index.html"
}, 
"assets": [
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "./../"
  },  
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "./"
  }
],

  5. Удалите папку dist , затем запустите ng build, чтобы увидеть index. html и favicon.ico in dist \ TestApp и все другие активы в dist \ TestApp \ assets .

    enter image description here

    enter image description here

  6. Чтобы дополнительно показать, как правильно настраиваются другие активы, поместите ресурс в исходные активы (например, src \ assets \ img \ kitten.jpg ) .

  7. Редактировать src \ index. html для ссылки на этот актив: 

    <body>
  <img src="./assets/img/kitten.jpg">
  <app-root></app-root>
</body>

  8. Удалить dist , затем запустите ng build, чтобы увидеть dist \ TestApp \ assets \ img \ kitten.jpg .

    enter image description here

  9. Запустите локальный http-сервер из каталога dist , чтобы увидеть изображение, отображаемое в браузер.

    enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...