Integrate Angular Elements with SharePoint Framework

In this article, we will explore how to create SharePoint Framework web part using Angular 6 framework.


  • Setup development environment for SharePoint framework. See this link.
  • Basic knowledge of Angular Elements. See this link.
  • Visual Studio Code. Download here.

What are Angular Elements

Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. Read more here.

SharePoint Project

Considering all pre-requisites are met. Create a folder in your working directory where project will be created. (In my case i have created a folder “Demos” on my desktop.). Launch command prompt and navigate to the folder. Type below command and hit enter-

yo @microsoft/sharepoint


This will start the creation of project and will prompt for few details (see below screenshot). Provide the details or accept the default values-


It will take some time as it will install all the packages required for SharePoint project.


Once project is created successfully, below screen is displayed-


Type below command to open project in Visual Studio Code –

code .

In VS Code, project will look like this-


Note: – Keep the command prompt open.

Integrate  Angular with SharePoint

Lets update some of the files for Angular to work with SharePoint Framework.


This file includes list of all packages required for the project. Open package.json file, under dependencies add following packages –

"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/elements": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@webcomponents/custom-elements": "^1.1.1",
"core-js": "^2.5.7",
"rxjs": "^6.2.0",
"zone.js": "^0.8.26"


This is the TypeScript configuration file for the IDE. Open tsconfig.json file, add below line under “compilerOptions”-

"emitDecoratorMetadata": true,
New file should look like below-
   "compilerOptions": {
        "target": "es5",
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "jsx": "react",
        "declaration": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "skipLibCheck": true,
        "typeRoots": [
        "types": [
        "lib": [
This is essential for Angular and it forces TypeScript to save type information as metadata. This helps the compiler to emit design-type information for decorated declarations. For decorators read this.


This file defines all the tasks for the project like compiling TypeScript files to JavaScript, bundle and minify JS/CSS files etc. We need to modify the build process. Open “gulpfile.js” file and add below code just above the “build.initialize” line-
const webpack = require('webpack');
const path = require('path');

   additionalConfiguration: (generatedConfiguration) => {
      generatedConfiguration.plugins.push(new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)fesm5/, path.join(__dirname, './client')));
      return generatedConfiguration;
New file should look like this-

Create Angular Component

Lets the create the component that will be rendered in SharePoint Framework. In Visual Studio Code, expand folder “src” -> “webparts” -> “myEvents” (this can be different based on name provided while creating the project) and create folder “app”.
Under “app” folder, create below files-


This file is the entry module for the Angular application. Below is the content in this file-
import { BrowserModule } from "@angular/platform-browser";
import { NgModule, Injector } from "@angular/core";
import { createCustomElement } from "@angular/elements";
import { AppComponent } from "./app.component";
import { HttpClientModule } from '@angular/common/http';

      imports: [
      declarations: [
      entryComponents: [
      providers: []

export class AppModule {
     constructor(private injector: Injector) {}

     public ngDoBootstrap() {

            const AppElement = createCustomElement(AppComponent, {injector : this.injector});
            customElements.define("my-app", AppElement);


This is the component which will hold the html/data to be displayed. Here we are displaying message configured through property pane and URL of current site. Below is the content of this file-
import { Component, Input } from "@angular/core";

   selector: "my-app",
   template: `
         This is Angular Elements SharePoint Framework Web Part.
         Message is : {{message}}
         Site URL is : {{siteUrl}}
   providers: []

export class AppComponent {

   public message: string;

   public siteUrl: string;

Update SharePoint Web Part

Now we need to updated the web part created with project to include our angular component. In Visual Studio Code, expand folders “src” -> “webparts” -> “myEvents” (this can be different based on the name provided while creating the project) and open “MyEventsWebPart.ts” file.
Add below import statements-
//Include Polyfills for unsupported browsers
import "@webcomponents/custom-elements/src/native-shim";
import "core-js/es7/reflect";

import { AppModule } from "./app/app.module";
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
Replace the render method with below code-
public render(): void {

     platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then(() => {
         this.domElement.innerHTML =`<my-app message="${}" site-url="${this.context.pageContext.web.absoluteUrl}"></my-app>`
Now we are good to test our application. In the command prompt (should be open already from the previous steps), execute the below command-
//install developer certificate
gulp trust-dev-cert

//This will execute a series of gulp tasks and launches browser to preview web part
gulp serve
Click on add button and select “MyEvents” web part.
It should show a default message and URL of the site.
Now edit the web part and change description field to see the changes.
That means our integration is successful and its working.

Browser Support for Angular Elements

Browser Custom Element Support
Chrome Supported natively.
Opera Supported natively.
Safari Supported natively.
Firefox Set the dom.webcomponents.enabled and dom.webcomponents.customelements.enabledpreferences to true. Planned to be enabled by default in version 60/61.
Edge Working on an implementation.


GitHub Repository

Code can be downloaded from the GitHub Repository here.



19 thoughts on “Integrate Angular Elements with SharePoint Framework

  1. I truly love your blog.. Great colors & theme. Did you create this site yourself? Please reply back as I’m looking to create my own personal site and want to know where you got this from or just what the theme is called. Many thanks!|


  2. I do believe all the ideas you have presented for your post. They’re very convincing and can definitely work. Still, the posts are very quick for novices. Could you please lengthen them a little from next time? Thank you for the post.


  3. Hey there would you mind sharing which blog platform you’re working with? I’m going to start my own blog in the near future but I’m having a tough time selecting between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design seems different then most blogs and I’m looking for something completely unique. P.S Apologies for being off-topic but I had to ask!|


  4. Fantastic blog! Do you have any recommendations for aspiring writers? I’m hoping to start my own blog soon but I’m a little lost on everything. Would you recommend starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m completely confused .. Any recommendations? Thank you!|


  5. Good day! I simply would like to give an enormous thumbs up for the great data you have got right here on this post. I shall be coming again to your weblog for extra soon.


  6. I found your weblog web site on google and verify just a few of your early posts. Proceed to maintain up the excellent operate. I simply additional up your RSS feed to my MSN Information Reader. Searching for forward to studying more from you afterward!…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s