In this blog, I am sharing how to create and deploy an ANGULAR build to SharePoint online by using the page viewer web part. I will cover the steps with visuals to make it as easy as possible.

Let’s start with the steps.

ANGULAR 9 DEPLOYMENT TO SHAREPOINT ONLINE

CREATING THE PROJECT

  • Open the folder where you want to create an angular project. My folder location is C:\Angular.
  • Write cmd on the address bar and press Enter

CMD will be displayed

  • In CMD, write the command(ng new [project name]) for creating a new project and press Enter. I’ve named my project DemoBuild
    • For default Angular Routing write Y and select style after that

The project will be created and displayed under Angular

  • Now open the project
    • Go to the Project folder location
    • Press shift and right click then select Open PowerShell window here

PowerShell window will be displayed.

  •  Write code . and press Enter
  • I am not writing any code, in this blog, my goal is just to define how can we deploy the build. so let us run the project.

RUNNING THE PROJECT

  • Open a new terminal window from the toolbar and write ng serve -o.

The project will be open on localhost.

  • The project is running successfully.

DEPLOYING THE BUILD

  • Now before making the build. We need to do a small code in app-routing. module.
    •  Open app-routing.module.ts.
    • Add highlighted code

Let’s quit ng serve.

  •  Open terminal window
    • Press CTRL + C OR click on Kill terminal. (Highlighted)

Open a new terminal and write command ng build.

Change the extension of the index page from html to aspx.

  • Perform few code changes in Index.aspx
    • Open index.aspx page and comment out or remove. <base href=”/”>
  • In Share Point, go to your site contents and create a folder.
    • I have created a folder Demo
  • Set the location of .js files in script src tag of the new folder created in SharePoint

Upload all files from dist folder to Sharepoint Demo

  • Click on index.aspx page. Your angular app will be successfully open in SharePoint Online.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment