Angular 9 Deployment to SharePoint Online

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

1. Open the folder where you want to create an angular project. My folder location is C:\Angular.

2. Write cmd on the address bar and press Enter.

3. 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.

4. 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

5. PowerShell window will be displayed. Write code . and press Enter.

6. I am not writing any code in this blog — my goal is just to define how we can deploy the build. So let us run the project.

Running the Project

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

8. The project will be open on localhost. The project is running successfully.

Deploying the Build

9. Now before making the build, we need to do a small code change in app routing module.

   • Open app-routing.module.ts
   • Add the highlighted code

10. Let’s quit ng serve.

    • Open terminal window
    • Press CTRL + C or click on Kill terminal

11. Open a new terminal and write command ng build.

12. Wait for a few minutes until the build is completed.

    • Then move to the project location. You will find a dist folder
    • Open it and your build files will be ready

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

14. Perform a few code changes in Index.aspx:

    • Open index.aspx page and comment out or remove <base href="/">

15. In SharePoint, go to your site contents and create a folder.

    • I have created a folder called “Demo”

16. Set the location of .js files in the script src tag to the new folder created in SharePoint.

17. Upload all files from the dist folder to the SharePoint Demo folder.

18. Click on index.aspx page. Your Angular app will be successfully open in SharePoint Online.

Conclusion

Our team of SharePoint experts is skilled in guaranteeing effective SharePoint development and solutions with results beyond expectations. They are experienced in creating new SharePoint custom development, enhancements to an existing SharePoint solution, or upgrades to the SharePoint environment. We have implemented solutions using Angular 9 and upgraded versions as well, including Renewal Tracking Application, Event Management solutions, and much more.