Различное расположение активов для разработки и производства приложения Angular 8 - PullRequest
Новая
       2

Различное расположение активов для разработки и производства приложения Angular 8

0 голосов
/ 24 октября 2019

Предположим, у меня есть несколько тегов img в моем проекте Angular 8. И мне нужно, чтобы эти изображения были разными, когда я создаю приложение для производства. Например, если у меня есть следующее в html-шаблоне при локальной работе над проектом 

<img src="assets/image1.jpg" />

, мне нужно, чтобы оно стало 

<img src="images/image1.jpg" />

для рабочей версии. Использование --baseHref и --deployUrl не помогает.

Как я могу это сделать?

Ответы [ 4 ]

0 голосов
/ 24 октября 2019

ок, предложенные решения у меня не работают. Я попытался изменить angular.json, но это по-прежнему не решает проблему, поскольку <img src="assets/myfoldername/img1.jpg /> по-прежнему включает assets part!

, поскольку я включаю приложение Angular в свой ASP.NET Core 3.0спроектировать и разместить его с IIS, я использовал правило перезаписи URL IIS, и теперь все работает. Так что не добавляйте фиктивное приложение, не используйте никакие переменные окружения в угловом приложении. Только одно правило переписывания . Готово.

PS. Я буду использовать промежуточное программное обеспечение для перезаписи URL в моем ядре ASP.NET, чтобы оно работало на любой ОС и веб-сервере.

0 голосов
/ 24 октября 2019

Создайте дополнительный профиль приложения для вашей производственной сборки и настройте ресурсы для вывода в любую папку, какую вы пожелаете. Вы также можете просто продублировать выходные данные в одном профиле сборки, чтобы они выводились в несколько мест.

Настройка нескольких профилей приложения: https://github.com/angular/angular-cli/wiki/stories-multiple-apps

Конфигурация активов: https://github.com/angular/angular-cli/wiki/stories-asset-configuration

"assets": [
  { "glob": "**/*", "input": "src/assets/", "output": "/output/" }
]

Далее просто используйте файлы окружения, чтобы сохранить путь для каждой сборки, и используйте его для привязки к вашему <img [src]="myImageVariable"/>

0 голосов
/ 24 октября 2019

Я думаю, что единственным решением для этого является использование Интеграция нескольких приложений :

в вашем .angular-cli.json добавление нового приложения для производства 

"apps": [
  {
    "root": "src",
    ...
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "assets": [
     "src/assets",
   ]
  },
  {
    "root": "src",
    ...
    "main": "main2.ts",
    "polyfills": "polyfills2.ts",
    "test": "test2.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app2",
    "assets": [
     "src/assets2",
   ]
  }  
],

Позжевремя подачи / здания:

Для обслуживания первого приложения: ng serve --app=0 или ng serve --app 0

Для обслуживания второго приложения: ng serve --app=1 или ng serve --app 1

0 голосов
/ 24 октября 2019

просто установите переменную в окружениях, затем используйте ее соответственно

например,: environment.ts: 

imagePath: /images

environment.prod.ts: 

imagePath: /assets

затем вам нужно импортировать окружение в ваш файл .ts и использовать переменную в пути

...