Angular in SharePoint 2013 WebParts

Dieser Beitrag zeigt wie eine Angular App für SharePoint erstellt und in einem WebPart eingebunden werden kann. Die Erstellung der App erfolgt über Angular CLI. Hierbei sind alle Komponenten enthalten, die für die Erstellung und Ausführung der App benötigt werden. Über Webpack werden dabei beispielsweise Elemente wie JavaScript und CSS gebündelt.

Angular in einem SharePoint WebPart

Installation von Angular CLI

Bevor wir beginnen können, muss NodeJS auf dem Entwicklungssystem installiert sein. Anschließend kann Angular CLI in der Command Prompt über den Befehl: npm install -g @angular/cli installiert werden.

Erstellen einer neuen Angular App

Als erstes benötigen wir eine neue App welche ebenfalls mithilfe der Command Prompt angelegt werden kann.

cd c:\projects
ng new AngularSpApp

Im Anschluss können noch weitere npm packages wie beispielsweise die Type Definitions für Microsoft SharePoint installiert werden.

cd AngularSpApp
npm install --save @types/sharepoint

Einbinden von Angular in ein SharePoint 2013 Projekt

Nach der Erstellung der App benötigen wir ein neues Visual Studio Projekt. Hierzu legen wir in Visual Studio ein neues Projekt vom Typ „SharePoint 2013 – Empty Project“ als Farm Solution an.

Anschließend müssen die Dateien von der Angular App in das SharePoint Projekt eingefügt werden.

Angular CLI in SharePoint

Um die App in der SharePoint Anwendung verwenden zu können muss in der Datei „.angular-cli.json“ der Ausgabepfad unter apps – outDir von „dist“ auf einen Pfad geändert werden, über welchen der Dateien später mit der wsp bereitgestellt werden können. Dies kann zum Beispiel ein Modul oder wie in diesem Bespiel der Layouts Folder sein.

SharePoint outDir

Jetzt muss noch der npm Task „build“ angepasst werden um beim Erstellen den richtigen Pfad für die Dateien verwenden zu können sowie den Hash-Wert in dem Dateinamen zu deaktivieren. Enthalten die Dateien den Hash-Wert können diese später nicht in einem WebPart eingebunden werden.
Die Anpassung von dem npm Task erfolgt in der Datei „package.json“:

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --output-hashing none --deploy-url /_layouts/15/SharePointProject1/App/",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},

Bauen der Angular App

Die App kann mithilfe der Package Manager Console über den folgenden Befehl gebaut werden:

cd SharePointProject1
npm run build

Die benötigten Dateien zum Ausführen der App werden hierbei in den Layouts Folder kopiert und müssen anschließend dem Projekt hinzugefügt werden.

Nach dem deployen der Solution kann die App unter der URL /_layouts/15/SharePointProject1/App/index.html aufgerufen werden.

Einbinden der Angular App in ein Web Part

Die App kann über den folgenden Code in der ascx von einem Visual Web Part eingebunden werden:

<link href="/_layouts/15/SharePointProject1/App/styles.bundle.css" rel="stylesheet"/>
<app-root>Loading...</app-root>
<script type="text/javascript" src="/_layouts/15/SharePointProject1/App/inline.bundle.js"></script>
<script type="text/javascript" src="/_layouts/15/SharePointProject1/App/polyfills.bundle.js"></script>
<script type="text/javascript" src="/_layouts/15/SharePointProject1/App/main.bundle.js?v=<%= Guid.NewGuid() %>"></script>

Einbinden der Polyfills

Je nach Anwendung werden noch zusätzliche Polyfills benötigten um ältere Browserversionen zu unterstützen. Die verfügbaren Polyfills sind bereits unter „src\polyfills.ts“ auskommentiert vorhanden und können einfach hinzugefügt werden. Hierbei ist jedoch zu beachten, dass das Polyfill „core-js/es6/string“ nicht im SharePoint funktioniert und die Standardfunktionalität beeinträchtigen. In diesem Fall funktionieren beispielsweise die Ribbons nicht mehr und es erscheint die folgende Meldung in der Browser Konsole: „Sys.ParameterCountException: Parameter count mismatch.

Angular App beim Bauen der SharePoint Solution erstellen

Um die App nicht jedes Mal über die Kommandozeile erstellen zu müssen kann die Ausführung von dem npm Task bei der Kompilierung der SharePoint Solution erfolgen. Hierzu muss die .csproj von dem SharePoint Projekt editiert werden und die folgende AfterBuild Aufgabe hinzugefügt werden:
<Target Name="AfterBuild">
<Exec Command="npm run build" WorkingDirectory="$(ProjectDir)" Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' " />
</Target>

Bei einem Release Build der SharePoint Solution wird nun auch die Angular App gebaut.