Blog

Angular 9 Deployment to Sharepoint online

Angular 9 Deployment

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.
Angular 9 Deployment

2. Write cmd on the address bar and press Enter

Angular 9 Deployment

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 For default
Angular 9 Deployment

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
Angular 9 Deployment

5. PowerShell window will be displayed.

    •  Write code . and press Enter
Angular 9 Deployment

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

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

Angular 9 Deployment

8. The project will be open on localhost.

  • The project is running successfully.
Angular 9 Deployment

DEPLOYING THE BUILD

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

    •  Open app-routing.module.ts.
    • Add highlighted code
Angular 9 Deployment

10. Let’s quit ng serve.

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

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

Angular 9 Deployment

12. Wait for a 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.
Angular 9 Deployment

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

Angular 9 Deployment

14. Perform few code changes in Index.aspx

    • Open index.aspx page and comment out or remove. <base href=”/”>
Angular 9 Deployment

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

    • I have created a folder Demo

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

Angular 9 Deployment to SharePoint online

17. Upload all files from dist folder to Sharepoint Demo

Angular 9 Deployment to SharePoint online

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

Angular 9 Deployment to 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.

 

Share This Post

Your email address will not published. Require fields are marked *