如何在 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