Angular on a regular SharePoint page



Hello SharePoint enthusiasts! 😊

In this article, I will show you how to use Angular on a regular SharePoint page without using the SharePoint framework. 🚀

Is it possible to use Angular with the regular SharePoint pages (2013/2016/2019)? Yes, absolutely, with the help of Angular Elements! 

    Why should we use Angular Elements?

  • Reusability to a Whole New Level

    With Angular Elements, we can make our components truly reusable. Meaning, you can use Angular Components in other frameworks and libraries, such as React, Vue, Ember, and even SharePoint!

  • Publish Parts of the Application

    Angular Elements also allows you to develop and publish parts of the application independently!

    Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

    Ok, so to achieve this we need to create an Angular Elements project, build it and copy results to someplace in SharePoint. The ideal place for this is the SiteAssets folder, where we can store all compiled scripts and reference them later on our SharePoint page.

What we need:

Let's start!

Angular side

    First of all, we have to create a new Angular project. For this, type in a terminal window:

ng new sharepoint-angular

    Answer for the following questions:

Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? N

Would you like to add Angular routing? N

Which stylesheet format would you like to use? CSS

    Ok, a new angular project has been created. Now type in a terminal window:

cd sharepoint-angular

    And we will add Angular elements support by typing:

ng add @angular/elements

    After receiving the "Packages installed successfully" message we are good to go! Now type:

code .

    VS code opens our newly created Angular project


    Let's clean our project a little bit. Go to src/app and remove everything related to app.component



    Now open app.module.ts and remove all references to app.component




    Add import statement

import { HttpClientModule } from '@angular/common/http';

    And add this module to the imports section

imports: [
BrowserModule,
HttpClientModule
]

    So the updated app.module.ts now looks like this:

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


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

    Ok, now we are ready to create our new component. Type in terminal: 

ng g c components/first-component

    Now open src/apps/components/first-component.component.html and modify HTML

<div style="background-color:#0072c6;width:300px;height:100px;color:white;padding:10px;">
<h1 style="color:white">Hello From Angular</h1>
<div>&nbsp;</div>
<div>First Element is working...</div>
</div>

    Great, now we need to register our angular element. For this open updated app.module.ts  and add entryComponents section and ngDoBootstrap function:

import { Injector, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FirstComponentComponent } from './components/first-component/first-component.component';
import { createCustomElement } from '@angular/elements';

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

constructor(private injector: Injector) {}

ngDoBootstrap() {
const firstElment = createCustomElement(FirstComponentComponent, {
injector: this.injector,
});
customElements.define('first-element', firstElment);
}

}

    Ok, so now we are good to go. Let's build our project:

ng build --prod --output-hashing=none

    After this, in dist/sharepoint-angular folder we will get 3 javascript files, which we will use on our SharePoint in the next step.




SharePoint part

    Ok, now once we have everything we need, it's time to work with our SharePoint. First of all, open your SharePoint designer and connect to the desired site. Then select SiteAssets library and create a new folder: sharepoint-angular


    Copy 3 files from the previous step and upload them to this folder.

 

    Now go to the Site Pages library and create the new page "Angular.aspx".



    Now right-click on it and select "Edit file in Advanced Mode".



    In the <head> block add references to our script files:

<script src="../SiteAssets/sharepoint-angular/polyfills.js"></script>
<script src="../SiteAssets/sharepoint-angular/runtime.js"></script>
<script src="../SiteAssets/sharepoint-angular/main.js"></script>

    And in the <body> section add our first element:

<h1>Test angular elements</h1>

<first-element></first-element>

    Now, open the page in the browser and check the result:



    Cool! We have proved that everything is working as expected. 

    In the next article, we will try to read data from our SharePoint list and add more interactivity to our component. 

    Stay tuned :)



Comments

Post a Comment

Popular posts from this blog

Which GOF patterns are good for C#?

Hello, C# fans! 😊 In this article, I will answer a common question that many C# developers have: which GOF patterns are good for C#? 🤔 GOF patterns are the 23 design patterns that were described in the book “ Design Patterns: Elements of Reusable Object-Oriented Software ” by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides. They are also known as the Gang of Four (GoF) patterns. They are divided into three categories: creational, structural, and behavioral. 📚 These patterns provide solutions to common software design problems that you may encounter in your projects. They help you write code that is more reusable, flexible, maintainable, and elegant. 😍 But not all GOF patterns are equally useful or applicable in C#. Some of them are more relevant and popular than others. Some are already supported by the language features or the .NET framework. Some of them may be outdated or replaced by newer patterns. 😮 So, which GOF patterns are good for C#?  Creational patterns...
Read more

Angular on a regular SharePoint page (part 2)

Image
In my  previous article , we have added an empty angular element to the SharePoint page.  And now we are ready to move forward and add some functionality to our elements. Before we begin      First of all, let's create in SharePoint Announcements list with the name "Announcements" and add a couple of items with some text. We will access data in our list via the SharePoint REST API, calling "/_api/web/lists/getbytitle('Announcements')/Items" endpoint. Angular project      Now, open the angular elements project which we have created in the previous article in VS Code.      For convenience let's create an interface to work with our data model. Create the "data" folder wonder the "src/app" and create a new file named Announcement.ts.      Add this code to it: export interface Announcement { ID : number ; Title : string ; Body : string ; }      We will use the service to get the data from our list. ...
Read more

Chain of Responsibility pattern in C#

Hello, C# lovers! 😍 Today I want to talk about a very useful design pattern called Chain of Responsibility. This pattern allows you to pass a request along a chain of handlers until one of them can handle it. This way, you can avoid coupling the sender of the request with the receiver, and you can dynamically compose the chain at runtime. Sounds cool, right? 😎 Let’s see an example of how to implement this pattern in C#. Suppose you have a simple ATM machine that can dispense bills of 10, 20, and 50 dollars. You want to write a program that can handle any amount of money requested by the user, using the least number of bills possible. To do this, you can create an abstract class called Handler that defines an interface for handling the requests. It also has a reference to the next handler in the chain, and a method to set it. // The 'Handler' abstract class public abstract class Handler { protected Handler successor; public void SetSuccessor ( Handler successo...
Read more