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

  • 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
  • Your project will be open
  • 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.
  • Wait for few minutes until the build is completed
    • Then move to the project location. You will find a dist
      • Open it and your build files will be ready.
  • 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.

CONCLUSION

Hope this blog helps in creating and deploying the Angular 9 app/project to SharePoint Online.

You can reach out to me via the comments section and feel free to share your feedback as well.

Leave a comment