Jan 10, 2020
Angular Elements with the SharePoint Framework (SPFX) WebPart
There are many SharePoint developers who want to no how Angular Elements works with SharePoint Framework (SPFX).
What You Should Know
- SPFX Development (SharePoint Framework)
- It’s essential that you are familiar with Angular
- Office 365 subscription (Tenant level)
- You will need Visual Studio Code
- Browser version: Chrome, or Edge Chromium will be best for development and debugging.
Why Angular Elements in SharePoint Framework
It’s been a lot of back and forth since the SharePoint Framework was launched in terms of development with Angular. Many SharePoint MVP’s and developers have provided many good demo examples of how Angular works with the SharePoint Framework. Microsoft have some tutorials on how to develop an SPFX Web Part with AngularJS (1.x). And it was not possible to use Angular (5++) etc with SharePoint Framework as far as i remember.
It has long been expected by many curious developers that Angular will work 100% with the SharePoint Framework, and many have chosen to switch to REACT as this framework is well adapted to SharePoint Framework, and well documented.
While you’ve been able to build full blown Angular apps using Angular v5++, it hasn’t been a good option when it comes to SharePoint Framework webpart. The primary reason is because you need a single root component that knows about everything on the page. This is an issue because when you have more than one SPFx Angular-based web part on the page. it is quite common to have more than one web part on a page, and that will brake the page since both want to take owner ship on the root component.
Here is a nice video explaining why Angular elements and SharePoint Framework
You will find many good explanations in various posts if you google a bit about this topic if you want to go into the depth of what the challenge was with SharePoint Framework and Angular.
So the solution here is to use Angular Elements witch allow you to build custom elements using Angular that can be used in any web project. These custom elements are just part of the web component specification that has been implemented by all the major browser vendors.
Browser support
- Chrome
- Edge Chromium
- Opera
- Safari
- Firefox
What are Angular Elements?
Angular Elements are components packaged as a custom element, a web standard for defining new HTML custom elements in a framework-agnostic way. A custom elements is a browser feature that allows you to extend the vernacular of HTML. It means that you can define your own HTML tags, with your own meaning to them.
Angular Elements are Custom Elements. You can embed them into any web application. This enables us to write re-usable Angular components & widgets which we can use inside React, Vue, Handlebar, or even with VanillaJS apps. The Angular Elements will blend in every framework. Below are some features of Angular Elements:
- They are Self Bootstrapping.
- They actually host the Angular Component inside a Custom Element.
- They’re a bridge between the DOM APIs and Angular Components.
- Anyone can use it without having the knowledge of how Angular works.
And since Angular Elements is a self-bootstrapping meaning it doesn't need to belong to a root component on the page. It will work as a sand-boxed custom elements component on the page without interacting with other web-parts.
An another important aspect of Angular Elements is that once it is compiled, all deliverable artifacts is plain vanilla JavaScript with no external dependencies to the page including Angular.
How to use Angular Element with SharePoint Framework
You have two options for generating SPFX web-part with Angular Elements. How to use @pnp/generator-spfx framework is well documented. The generator @pnp/generator-spfx creates two projects, one project set up for AngularElements and one for the SharePoint Framework.
The benefit of this approach is that Angular developer can use the typical Angular tools for the development. The output of this Angular project integrates into the SharePoint Framework project with the integration of web parts and extensions. This approach combines the best of both worlds and makes sure the overall result is optimized from the performance perspective.
Note: You must first setup SharePoint Framework development environment
Quick Install
Install developer tools:
Install Code editor
Install Yeoman
npm install -g yo gulp (v3.9.1)
Install Yeoman SharePoint Generator
- npm install -g @microsoft/generator-sharepoint
Trusting self-signed developer certificate
gulp trust-dev-cert
