How to Integrate SharePoint Framework-SPFx with Angular 4 | Hubfly

By definition, SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. If you use SharePoint Framework, you could use modern web technologies and tools in a development environment of your choice and build apps that are responsive and mobile-ready.

Setup your Environment to run SPFx Apps

Please follow the steps added in this official SPFx documentation https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment to setup your environment to run SPFx apps.

Once you setup the environment follow the procedures mentioned in this official documentation https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part to build your first SPFx webpart with (No Javascript framework).

Now let us get ready to integrate Angular4 in your SPFx webpart by following the below steps.

Replace the dependencies in the package.json file with the one below

"dependencies": {
"@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",
"@microsoft/sp-core-library": "~1.1.0",
"@microsoft/sp-webpart-base": "~1.1.1",
"@types/jquery": "3.2.15",
"@types/lodash": "4.14.58",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"lodash": "^4.17.4",
"reflect-metadata": "0.1.10",
"rxjs": "~5.0.1",
"systemjs": "0.19.40",
"typings": "2.1.1",
"zone.js": "~0.8.4"
},

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

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

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

Now, add a new folder app in the following hierarchy \\{solutiondirectory} > src > webparts > {solutionName}

Now, add a new folder “Components” under app folder where you maintain all your Angular 4 components.

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

Make sure the app.module.ts file looks like below snippet for the initial setup by registering the AppComponent then once your application grows you can add other stuffs 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 { }

Modify the app.component.ts file so that it looks as shown below in order to bring in the SPFx user context inside Angular 4 instance and display a welcome message to 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(){
}
ngOnInit() {
this.context= window["webPartContext"];
this.name= this.context.pageContext.user.displayName;
}
}

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

Now add the following lines at the top of the \\{solutiondirectory} > src > webparts > {solutionName}\{solutionName}WebPart.ts file generated by SPFx generator where you will append your html code to the SP DOM

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

Replace the contents of the render() method in the same file as shown below,

public render(): void {
    window['webPartContext']=this.context;
        this.domElement.innerHTML = '<my-spfx-app>Loading..</my-spfx-app>';
    platformBrowserDynamic().bootstrapModule(AppModule);
  }

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

window['webPartContext']=this.context;

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

As It is running in localhost workbench user name is displayed as “User”. If you run in your sites workbench ex:

https://{yourtenant}.sharepoint.com/{yourSiteUrl}/_layouts/15/workbench.html you should be able to see the current user name which is read from the SPFx page context through Angular 4 component.

If you have any questions/issues about the SharePoint Framework, feel free to raise your questions in the comments below. Also, subscribe to our blog to get you notified of our latest insights. You might also be interested in knowing how to setup Angular 4 in Visual Studio.

Update: Here is a workable solution file, ready to be deployed based on Darius’ comment below. Once you download the sample solution go to your node.js command prompt and redirect to the sample solution directory. Now restore the node packages by using the command “npm install”

Download here: SPFx-Angular4-sample