How To Integrate SharePoint Framework-SPFx Apps With Angular

Introduction

This article demonstrates how to integrate SharePoint Framework with Angular 4 which is one of the most powerful front-end development frameworks which is emerging day by day.

Prerequisites

Before starting,  make sure you have the development environment ready by following official Microsoft SPFx documentation. Once you set up the development environment please follow building your first SharePoint Framework (SPFx) webpart to get your first SPFx web part ready.

Currently, SPFx provides default setup support for react and knockout so please choose “No Javascript framework” option when it asks to choose a framework while creating the SPFx app.

Now, let’s get ready to integrate Angular4 in your SPFx webpart by following the below steps,

Integrating Angular packages in SPFx

Step 1

Make sure you have the below packages added under the dependencies section in the package.json file

"@angular/animations": "~4.0.0",
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"lodash": "^4.17.4",
"reflect-metadata": "0.1.10",
"rxjs": "~5.0.1",
"systemjs": "0.19.40",
"typescript-string-operations": "~1.1.0",
"typings": "^2.1.1",
"zone.js": "~0.8.4",

Code Snippet: 1

Now, go to your npm command prompt and make sure that the terminal is pointing to your project directory and restore the newly added Angular 4 package dependencies by using the command npm install

Example: E:\your project directory >npm install

Step 2

Now, open the tsconfig.json file and match the below contents with that file,

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "webpack-env"
    ],
    "lib": [
      "dom",
      "dom.iterable",
      "es2015",
      "scripthost"
    ],
  },
  "compileOnSave": true
}

Code Snippet: 2

The highlighted contents are the modified ones from the actual file.

Now, we have the required packages imported into our application and config files are updated accordingly.

Implementing Angular project setup in SPFx

Step 1

Add a new folder app in the following hierarchy \\{solutiondirectory} > src > webparts > {webpartName}

Example - E:\first-spfx-webpart\src\webparts\helloworld

Step 2

Add a new folder “Components” under app folder, which is created in previous step, where you will maintain all your Angular 4 components.

Step 3

Create a typescript file named as “app.module.ts” in your “app” folder.

Step 4

Create a typescript file named as “app.component.ts” file in “app/Components” folder.

Step 5

Make sure the app.module.ts file looks like the below snippet for the initial setup by registering the AppComponent then once your application grows you can add other stuff too.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './Components/app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Code Snippet: 3

Step 6

Modify the app.component.ts file to look like below in order to take the SPFx user context inside Angular 4 instance and display a Welcome message for the user.

import { Component, Input, OnInit,Inject } from '@angular/core';
import {IWebPartContext} from '@microsoft/sp-webpart-base';

@Component({
  selector: 'my-spfx-app',
  template: `<h1>Welcome to SPFx {{name}}!!</h1>`
})
export class AppComponent implements OnInit  {
    public name: string = '';
    public context:IWebPartContext;

    constructor(){
    }

    public  ngOnInit() {
        this.context= window["webPartContext"];
        this.name= this.context.pageContext.user.displayName;
    }
}

Code Snippet: 4

The default user context info given by SPFx is loaded into Angular instance by reading from the window using the below piece of code only,

this.context= window["webPartContext"];

 

Code Snippet: 5

Step 7

Now, add the following lines at the top of the default webpart.ts file which is located in the below location \\{solutiondirectory} > src > webparts > {webpartName}\{solutionName} WebPart.ts file generated by SPFx generator where you will append your HTML code to the  DOM element.

Example - E:\first-spfx-webpart\src\webparts\helloworld\helloworldWebPart.ts

import "reflect-metadata";

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
require('zone.js');

Code Snippet: 6

Replace the contents of the render() method in the same file like below, which will trigger the Angular app component through its selector.

public render(): void {
    window['webPartContext'] = this.context;

    this.domElement.innerHTML = '<my-spfx-app>Loading..</my-spfx-app>';
    platformBrowserDynamic().bootstrapModule(AppModule);
  }

Code Snippet: 7

The default user context information given by SPFx is loaded into Angular instance by assigning it to window and reading it in Angular components,

Now, save all the files in your IDE and run gulp serve in the command prompt, you should be able to see the below screen.

Figure: 1

 

As it is running in localhost workbench username is displayed as “User1”  if you run it in your SharePoint site workbench.

https://{yourtenant}.sharepoint.com/{yourSiteUrl}/_layouts/15/workbench.aspx  You should be able to see the current username which is read from the SPFx page context through the Angular 4 component like below,

Figure: 2

Summary

In this article, I discussed how we can integrate Angular with SharePoint Framework by updating the npm packages and did some basic config setup to trigger Angular. Also, we have seen how to take the SharePoint context into the Angular instance.

If you have any questions/issues about this article, please let me know in the comments.