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.