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

Question

我开发了一个angular web application 。 我想在SharePoint上托管该应用程序，以便至少在同一 org.network 中的人可以通过所有用户交互浏览我的网站。

Angular 项目有.html和.ts文件扩展名而不是.aspx 。

我的应用程序从应用程序assets文件夹中的报告中获取数据，并使用Bootstrap4.5, Angular 10 。 我使用的是SharePoint Online 2019 OnPrem版本。

请建议我可能的解决方案

Answer 1

是 SP Online 还是 onPrem？

您可以将 an.aspx 页面添加到库中（js 和 css 到同一个库），在此页面中，您可以放置所有 html 代码和 src 您的 css 和 js 但请注意，任何页面将始终显示在“下方”主 SharePoint 母版页，您可能会收到一些样式冲突

这是一篇很好的文章，介绍了我试图解释的概念

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

更新 1

为了在 SharePoint 中使用任何 JS 框架呈现一些单页 html 应用程序，我们需要：

如果我们想存储我们的解决方案，请确保在现场启用自定义脚本

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

Set-SPOsite <SiteURL> -DenyAddAndCustomizePages 0

有关此的更多参考信息，请参见此处 -> https://learn.microsoft.com/en-us/sharepoint/allow-or-prevent-custom-script

启用“wiki 页面主页”功能，以便在网站上启用网站资产

在现场时，我们希望将我们的解决方案 go 包含到站点功能中并启用 wiki 页面主页功能。

Go 到行<SiteURL>/_layouts/15/ManageFeatures.aspx并激活

将我们解决方案的 html 文件更新为 aspx 并准备 SharePoint

可以说我有创建我的解决方案的休闲文件（一些 html，一些 js，一些 css）

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>

script.js具有以下内容

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

style.css有以下内容

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

我们需要做的就是将格式从 html 更改为 aspx 文件。 所以我们将page.html更新为page.aspx 。 然后我们需要将内容更新到以下内容

<%@ 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>

将所有需要的文件添加到站点并测试

接下来我们需要 go 到<SiteURL>/SiteAssets/Forms/AllItems.aspx并将所有需要的文件上传到 SharePoint（所有样式、脚本、视图等）

全部上传后我们可以点击page.aspx在浏览器中查看工作结果

在 SharePoint 页面嵌入解决方案

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

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

问题描述

1 个解决方案

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

更新 1

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

问题描述

1 个解决方案

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

更新 1

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