В этой статье я буду использовать два решения, которые я нашел в Интернете, но не совсем соответствовали моим потребностям. В конце этой статьи вы сможете найти полный пример проекта на моем GitHub с использованием этих решений.
Первому следует отдать должное Андресу Рутнику в его статье Создание приложений Angular на Salesforce. Второй - Александру Гаврилову и его статье Развертывание приложения Angular в Salesforce. Хотя решение Andres немного подавляет, в последнем отсутствует функция маршрутизации, поэтому идея здесь заключается в использовании службы маршрутизации. созданный Андресом, и используйте приведенный ниже gulpfile Александра:
Этот gulpfile.js необходимо скопировать в корневую папку проекта в то же место, что и файл angular.json. Если вы будете использовать ресурсы, такие как изображения в своем html-файле, или вызывать удаленное действие из контроллера Salesforce, вам также потребуется скопировать файл salesforce.service.ts, использование которого можно увидеть в статье. выше, или вы также можете проверить мой пример проекта в конце этой статьи.
Также создайте файл .env в корневой папке со следующими переменными:
SF_USERNAME=YOUR_ORG_USERNAME SF_PASSWORD=YOUR_PASSWORD+YOUR_SECURITY_TOKEN DIST_PATH=dist/YOUR_PROJECT_NAME LOGIN_URL=https://test.salesforce.com PAGE_NAME=YOUR_PAGE_NAME RESOURCE_NAME=YOUR_STATIC_RESOURCE_NAME CONTROLLER=YOUR_APEX_CONTROLLER EXTENSIONS=YOUR_EXTENSIONS or blank API_VERSION=YOUR_API_VERSION BASE_HREF=/ DEV_RESOURCES_URL=http://localhost:4200
Необходимо установить следующие зависимости, выполнив команду:
npm install gulp@3 gulp-zip gulp-jsforce-deploy dotenv gulp-rename gulp-replace gulp-file --save-dev
И добавьте эти скрипты в свой файл package.json:
"dev": "ng build && gulp rm && gulp build-dev-package && gulp deploy && ng serve", "prod": "ng build && gulp rm && gulp build-package && gulp deploy"
Почти готово! Если вы выполните команду npm run prod, вы сможете развернуть свою страницу и статические ресурсы в Salesforce, однако функция маршрутизации по-прежнему отсутствует. Давай поработаем над этим! Во-первых, нам нужна услуга, созданная Андресом, вы можете скопировать ее в любое место в каталоге папок вашего приложения:
Теперь вам нужно добавить службу к поставщикам вашего модуля приложения, как показано в строке 20 файла app.module.ts ниже:
Наконец, добавьте сценарий на главную страницу index.html в корневой каталог:
Теперь, если вы снова выполните npm run prod… БУМ! Вы только что развернули в Salesforce приложение angular с маршрутизацией! Небо это предел. Чтобы увидеть полностью работающий проект, вы можете клонировать мой репозиторий:
Огромный PS: у меня были проблемы с отображением моего cat.gif, поэтому я также использовал решение Andres. На самом деле я предлагаю прочитать обе статьи, которые я цитировал здесь. Не стесняйтесь оставлять комментарии или сомнения.
