(Подробнее об angular-cli см. В документации angular-cli.)
Angular-cli позволяет быстро разрабатывать клиентские приложения. Отладить приложения angular локально с помощью Hot Module Replacement, который предлагает angular-cli, очень просто. Если мы используем клиентские библиотеки с SharePoint, мы должны загружать обновленный файл кода каждый раз, когда он изменяется, и это не обеспечивает хорошего опыта разработки. В этом посте мы создадим конвейер непрерывного развертывания, который можно использовать для создания и отладки приложений angular с помощью SharePoint. Одно из предостережений в отношении этого подхода заключается в том, что он не соответствует стандартному процессу сборки и упаковки, предоставляемому приложениями SharePoint и SharePoint Framework. Если вам нужен более контролируемый способ распространения приложений, следует отдавать предпочтение SharePoint Apps / Framework для упаковки. Если вы хотите использовать веб-часть редактора сценариев и возможность легко тестировать и разрабатывать компоненты на стороне клиента, вы можете воспользоваться этим конвейером непрерывного развертывания.
Предупреждение о передовой практике:
Создание приложения с использованием веб-части редактора сценариев не является контролируемым / повторяемым способом создания настроек для SharePoint Online. Вы можете использовать веб-часть редактора сценариев и линию компакт-диска для хорошего взаимодействия с разработчиками, но убедитесь, что вы распространяете приложения с использованием рекомендованного подхода к упаковке приложений.
Необходимые инструменты:
- NodeJS - установка с https://nodejs.org/en/
2) Angular CLI - установка с использованиемnpm install -g @angular/cli
3) Редактор кода по вашему выбору - мой код VS - https: // code.visualstudio.com/
4) Среда SharePoint Online
Шаг 1: Создайте новый угловой проект:
Перейдите в командную строку и запустите ng new mysp-app
, чтобы сформировать новый проект angular. Это также установит все необходимые пакеты Node.
Шаг 2. Настройте параметр синхронизации OneDrive
Мы будем использовать библиотеку Site Assets для нашего развертывания. Перейдите в библиотеку ресурсов сайта целевого семейства сайтов и нажмите параметр SYNC, чтобы начать синхронизацию этой библиотеки с локальной установкой OneDrive.
Шаг 3. Установите одну папку на диске в качестве цели развертывания
Откройте проект angular, созданный в коде Visual Studio, и откройте файл .angular-cli.json. Это файл конфигурации для angular cli. Вам будут доступны различные свойства проекта, и нас интересует свойство "outDir"
. Установите для этого свойства локальную папку на одном диске, которая была синхронизирована на предыдущем шаге. Здесь мы инструктируем angular cli помещать выходные файлы, созданные после сборки приложения, в одну папку на диске. После создания вывода OneDrive будет отвечать за его синхронизацию с библиотекой документов SharePoint.
Шаг 4. Создайте пустое приложение
Создайте пустое приложение angular, которое было создано на шаге 1. Чтобы создать приложение, откройте командную строку, перейдите в корневую папку приложения angular и запустите ng build --prod
Эта команда создаст приложение в производственном режиме и сгенерирует вывод в "outDir"
пути к папке . Это сгенерирует несколько файлов javascript
и на эти файлы есть ссылки в нашем файле index.html, который также создается в выходном каталоге.
Шаг 5. Использование веб-части редактора скриптов
Теперь, когда мы можем создавать и развертывать наши файлы в библиотеке ресурсов сайта SharePoint, мы можем использовать эти файлы для обслуживания нашего приложения в SharePoint. Перед этим нам нужно внести пару изменений:
Создать новую страницу веб-части в SharePoint и добавить веб-часть редактора сценариев. Измените содержимое index.html, как показано ниже:
Если вы посмотрите внимательно, базовый href будет обновлен до страницы SharePoint: https://sumitagrawal.sharepoint.com/SiteAssets/AngularApp.aspx. Это должен быть URL-адрес страницы, на которой добавляется веб-часть редактора скриптов. Мы обновили базовый href, так как он будет использоваться позже при угловой маршрутизации. Мы указываем здесь, что для всей маршрутизации используйте эту страницу в качестве базового URL.
Второе внесенное нами изменение - обновление всех URL-адресов скриптов и таблиц стилей на те, которые есть в библиотеке SiteAssets. Также обратите внимание, что имена файлов изменены, и мы удалили хеш из имени файла. Это изменение сделано для того, чтобы всякий раз, когда angular-cli генерирует новые файлы, нам не нужно изменять ссылки на файлы в содержимом веб-части редактора сценариев.
Шаг 6. Сборка без хеша
Поскольку нам не нужны хеш-коды в именах файлов, запустите команду ng build --prod --output-hashing none
, которая выдаст тот же результат, но без хешей.
Если вы сейчас перейдете на страницу своей веб-части, вы должны увидеть приложение Hello World Angular!
Шаг 7: Непрерывное развертывание
Мы нацелены на то, чтобы сохранить наши изменения и увидеть их прямо в браузере. Для этого выполните следующую команду из командной строки из корня текущего проекта: ng build --prod --output-hashing none --watch
Мы инструктируем angular cli запускать процесс сборки в режиме просмотра, чтобы, как только в нашем исходном коде были изменены какие-либо файлы, angular cli построит приложение в производственном режиме без каких-либо хешей и отправит его в папку OneDrive, OneDrive синхронизирует их изменения в нашей библиотеке ресурсов сайта SharePoint и в веб-части редактора сценариев будут обновлены файлы после жесткого обновления (Ctrl + F5)