Angular 9 Deployment to Sharepoint online

Blog

You are here:
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.
Picture1 1

2. Write cmd on the address bar and press Enter

Picture2 1

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
Picture3 1

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
Picture4 1

5. PowerShell window will be displayed.

    •  Write code . and press Enter
Picture5 1

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.

Picture7 1 300x216 1

8. The project will be open on localhost.

  • The project is running successfully.
Picture8 1

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
Picture9 1

10. Let’s quit ng serve.

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

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

Picture11

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

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

Picture13

14. Perform few code changes in Index.aspx

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

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

Picture15

17. Upload all files from dist folder to Sharepoint Demo

Picture16
Picture16

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

Picture17

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 solution using angular 9 and upgraded versions as well that includes, including Renewal Tracking Application, Event Management solutions, and much more.

Latest Posts

Blog

You are here:

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.
Picture1 1

2. Write cmd on the address bar and press Enter

Picture2 1

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
Picture3 1

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
Picture4 1

5. PowerShell window will be displayed.

    •  Write code . and press Enter
Picture5 1

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.

Picture7 1 300x216 1

8. The project will be open on localhost.

  • The project is running successfully.
Picture8 1

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
Picture9 1

10. Let’s quit ng serve.

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

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

Picture11

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

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

Picture13

14. Perform few code changes in Index.aspx

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

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

Picture15

17. Upload all files from dist folder to Sharepoint Demo

Picture16
Picture16

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

Picture17

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 solution using angular 9 and upgraded versions as well that includes, including Renewal Tracking Application, Event Management solutions, and much more.

Share This Post

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

Contact Information

Have any questions or interested in our services? We’re here to help! Reach out to us, and our dedicated team will swiftly respond to your inquiries. 

Contact Information

Ready to Explore? Whether You Want to Discuss Our Services or Have Queries, Feel Free to Send Us a Message and Let’s Get Started.