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

Pre-Requisites

• 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.

package.json

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"

"emitDecoratorMetadata": true,

{
   "compilerOptions": {
        "target": "es5",
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "jsx": "react",
        "declaration": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "skipLibCheck": true,
        "typeRoots": [
            "./node_modules/@types",
            "./node_modules/@microsoft"
        ],
        "types": [
            "es6-promise",
            "webpack-env"
        ],
        "lib": [
            "es5",
            "dom",
            "es2015.collection"
        ]
   }
}

gulpfile.js

const webpack = require('webpack');
const path = require('path');

build.configureWebpack.mergeConfig({
   additionalConfiguration: (generatedConfiguration) => {
      
      generatedConfiguration.plugins.push(new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)fesm5/, path.join(__dirname, './client')));
      
      return generatedConfiguration;
   }
});

Create Angular Component

app.module.ts

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';

@NgModule({
      imports: [
         BrowserModule,
         HttpClientModule
      ],
      declarations: [
         AppComponent
      ],
      entryComponents: [
         AppComponent
      ],
      providers: []
})

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

     public ngDoBootstrap() {
         if(!customElements.get("my-app"))
         {

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

app.component.ts

import { Component, Input } from "@angular/core";

@Component({
   selector: "my-app",
   template: `
         This is Angular Elements SharePoint Framework Web Part.
         <br/>
         Message is : {{message}}
         <br/>
         Site URL is : {{siteUrl}}
       `,
   providers: []
})

export class AppComponent {

   @Input()
   public message: string;

   @Input()
   public siteUrl: string;
}

//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";

public render(): void {

     platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then(() => {
         this.domElement.innerHTML =`<my-app message="${this.properties.description}" site-url="${this.context.pageContext.web.absoluteUrl}"></my-app>`
     })
}

//install developer certificate
gulp trust-dev-cert

//This will execute a series of gulp tasks and launches browser to preview web part
gulp serve

Browser Support for Angular Elements

References

• https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/angularelements-helloworld
• https://angular.io/guide/elements#browser-support

GitHub Repository