How to host a angular web application on SharePoint

Question

I have developed a angular web application . I want to host that application on SharePoint so that at least people who are in the same org.network can browse my site with all the user interaction.

Angular project has .html and .ts file extension not .aspx .

My application getting data from reports which are there in assets folder of application and using Bootstrap4.5, Angular 10 . I am using SharePoint Online 2019 OnPrem version.

Please suggest me possible solution

Answer 1

is it SP Online or onPrem?

You may add an.aspx page to a library (js and css to the same library) and in this page you may put all your html code and src your css and js BUT please be aware that any page will be always displayed 'under' the main SharePoint master page and you may receive some styling conflicts

Here is a nice article that present the concept I tried to explain

https://dattabase.com/blog/classic-solution-in-modern

Update 1

In order to present some single page html app with any JS framework in SharePoint we need to:

make sure custom scripts is enabled on site were we want to store our solution

in order to do this we need to connect to SharePoint admin page using Management Shell (login as admin) and run the fallowing command

Set-SPOsite <SiteURL> -DenyAddAndCustomizePages 0

More reference information about this may be found here -> https://learn.microsoft.com/en-us/sharepoint/allow-or-prevent-custom-script

enable 'wiki page home page' feature in order to have site assets enabled on site

When being on site were we want to include our solution go to site features and enable wiki page home page feature.

Go to line <SiteURL>/_layouts/15/ManageFeatures.aspx and activate

update html file of our solution to aspx and prepare for SharePoint

lets say I have the fallowing files that create my solution (some html, some js, some css)

the page.html has the fallowing content

<html>
    <link rel="stylesheet" href="./style.css">
<body>
        <!-- my html -->
        <h1>Hello</h1>
        <p id="world"></p>
</body>
    <script src="./script.js"></script>
</html>

the script.js has the fallowing content

document.getElementById("world").innerText = "world";

the style.css has the fallowing content

#world{
    color: red;
    font-size: 16px;
}

all we need to do is change the format from html to aspx file. So we update the page.html to page.aspx . Then we need to update the content to the fallowing

<%@ Page Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<!-- Required to be used in an App Part -->
<WebPartPages:AllowFraming runat="server" />

<html>
    <link rel="stylesheet" href="./style.css">
<body>
    <form runat="server">
        <SharePoint:FormDigest runat="server" />
        <SharePoint:ScriptLink Name="MicrosoftAjax.js" runat="server" Defer="False" Localizable="false" />
        <SharePoint:ScriptLink Name="sp.core.js" runat="server" Defer="False" Localizable="false" />
        <SharePoint:ScriptLink Name="sp.js" runat="server" Defer="True" Localizable="false" />
        
        <!-- my html -->
        <h1>Hello</h1>
        <p id="world"></p>
    </form>
</body>
    <script src="./script.js"></script>
</html>

add all needed file to site and test

next we need to go to <SiteURL>/SiteAssets/Forms/AllItems.aspx and upload all the needed files to SharePoint (all style, scripts, views etc.)

after all is uploaded we may click on page.aspx to see the working result in browser

embed solution on SharePoint page

now in order to add this solution to any page we need to add embed webpart to page and paste the page.aspx url to the config

How to host a angular web application on SharePoint

Question

1 answers

solution1
0 2020-12-03 22:30:38

Update 1

How to host a angular web application on SharePoint

Question

1 answers

solution1 0 2020-12-03 22:30:38

Update 1

solution1
0 2020-12-03 22:30:38