如何在 SharePoint 上托管 angular web 应用程序

Question

I have developed a angular web application .我开发了一个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.我想在SharePoint上托管该应用程序，以便至少在同一 org.network 中的人可以通过所有用户交互浏览我的网站。

Angular project has .html and .ts file extension not .aspx . Angular 项目有.html和.ts文件扩展名而不是.aspx 。

My application getting data from reports which are there in assets folder of application and using Bootstrap4.5, Angular 10 .我的应用程序从应用程序assets文件夹中的报告中获取数据，并使用Bootstrap4.5, Angular 10 。 I am using SharePoint Online 2019 OnPrem version.我使用的是SharePoint Online 2019 OnPrem版本。

Please suggest me possible solution请建议我可能的解决方案

Answer 1

is it SP Online or onPrem?是 SP Online 还是 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您可以将 an.aspx 页面添加到库中（js 和 css 到同一个库），在此页面中，您可以放置所有 html 代码和 src 您的 css 和 js 但请注意，任何页面将始终显示在“下方”主 SharePoint 母版页，您可能会收到一些样式冲突

Here is a nice article that present the concept I tried to explain这是一篇很好的文章，介绍了我试图解释的概念

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

Update 1更新 1

In order to present some single page html app with any JS framework in SharePoint we need to:为了在 SharePoint 中使用任何 JS 框架呈现一些单页 html 应用程序，我们需要：

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为此，我们需要使用管理 Shell（以管理员身份登录）连接到 SharePoint 管理页面并运行以下命令

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有关此的更多参考信息，请参见此处 -> 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启用“wiki 页面主页”功能，以便在网站上启用网站资产

When being on site were we want to include our solution go to site features and enable wiki page home page feature.在现场时，我们希望将我们的解决方案 go 包含到站点功能中并启用 wiki 页面主页功能。

Go to line <SiteURL>/_layouts/15/ManageFeatures.aspx and activate Go 到行<SiteURL>/_layouts/15/ManageFeatures.aspx并激活

update html file of our solution to aspx and prepare for SharePoint将我们解决方案的 html 文件更新为 aspx 并准备 SharePoint

lets say I have the fallowing files that create my solution (some html, some js, some css)可以说我有创建我的解决方案的休闲文件（一些 html，一些 js，一些 css）

the page.html has the fallowing content page.html有以下内容

<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 script.js具有以下内容

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

the style.css has the fallowing content style.css有以下内容

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

all we need to do is change the format from html to aspx file.我们需要做的就是将格式从 html 更改为 aspx 文件。 So we update the page.html to page.aspx .所以我们将page.html更新为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.)接下来我们需要 go 到<SiteURL>/SiteAssets/Forms/AllItems.aspx并将所有需要的文件上传到 SharePoint（所有样式、脚本、视图等）

after all is uploaded we may click on page.aspx to see the working result in browser全部上传后我们可以点击page.aspx在浏览器中查看工作结果

embed solution on SharePoint page在 SharePoint 页面嵌入解决方案

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现在为了将此解决方案添加到任何页面，我们需要将嵌入的 Web 部件添加到页面并将 page.aspx url 粘贴到配置中

如何在 SharePoint 上托管 angular web 应用程序

问题描述

1 个解决方案

解决方案1
0 2020-12-03 22:30:38

Update 1更新 1

如何在 SharePoint 上托管 angular web 应用程序

问题描述

1 个解决方案

解决方案1 0 2020-12-03 22:30:38

Update 1更新 1

解决方案1
0 2020-12-03 22:30:38