(Подробнее об angular-cli см. В документации angular-cli.)

Angular-cli позволяет быстро разрабатывать клиентские приложения. Отладить приложения angular локально с помощью Hot Module Replacement, который предлагает angular-cli, очень просто. Если мы используем клиентские библиотеки с SharePoint, мы должны загружать обновленный файл кода каждый раз, когда он изменяется, и это не обеспечивает хорошего опыта разработки. В этом посте мы создадим конвейер непрерывного развертывания, который можно использовать для создания и отладки приложений angular с помощью SharePoint. Одно из предостережений в отношении этого подхода заключается в том, что он не соответствует стандартному процессу сборки и упаковки, предоставляемому приложениями SharePoint и SharePoint Framework. Если вам нужен более контролируемый способ распространения приложений, следует отдавать предпочтение SharePoint Apps / Framework для упаковки. Если вы хотите использовать веб-часть редактора сценариев и возможность легко тестировать и разрабатывать компоненты на стороне клиента, вы можете воспользоваться этим конвейером непрерывного развертывания.

Предупреждение о передовой практике:

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

Необходимые инструменты:

  1. 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)