導出Angular單頁應用到Static HTML/CSS/JS

Question

I am looking for way to convert single page Angular Application to old style html-css-javascript static files, which runs on my pc without any set-up of complicated node.js or any npm

What I was looking for and came to Angular is, I was heavily looking for Bootstrap-sidebar with lightweight css and js but all the examples I could find had large, big size of Javascript files, so I saw Angular had some novel implementation of Sidebar .

我想將 Angular 側邊欄（Angular 應用程序）轉換為舊式HTML 、 css和js文件，這樣我就可以在沒有任何復雜節點服務器的情況下運行它們。

有什么方法可以讓 javascript、css 和 html 脫離 ZC31C335EF37283C451B18BA0DD371 應用程序。 我聽說過WebPack但沒有嘗試過，所以任何建議都將不勝感激。

如果上述過程可以在React中完成，請建議我一個可靠的方法來做到這一點。

Edit: What I want is, I want to access the file as file://path/to/index.html I do not want HTTP ( http://localhost/index.html )

Answer 1

筆記

在編譯一個angular項目時，結果已經是一個普通的html/css/js網站了。 您不需要 nodejs 來運行 angular，但是，與任何網站一樣，您應該使用 http 服務器。 因此，您的問題在於，如果沒有網絡服務器，您無法從文件中打開 angular 網站。

解釋

您的問題可能是從瀏覽器打開生成的index.html時控制台出現錯誤。 它們來自瀏覽器實現的改進的安全標准（CORS、嚴格的 mime 類型、訪問本地文件……）。 由於除了說明您只有一個空白頁面之外，您根本沒有提供任何錯誤詳細信息，因此這是一個基本解決方案

解決方案

嘗試將 base href 設置為. 建的時候

ng build --prod --base-href=.

該網站無需對 Firefox 采取進一步操作即可正常工作。

在 chrome 上，您可能會遇到以下錯誤之一

CORS 策略已阻止從源“null”訪問“file://XXXXXXscripts.js”處的腳本：僅協議方案支持跨源請求：http、data、chrome、chrome-extension、Z5E05617.BADEA6

或者

加載模塊腳本失敗：服務器以非 JavaScript MIME 類型“”響應。 根據 HTML 規范對模塊腳本強制執行嚴格的 MIME 類型檢查

如果使用 angular 8+，則可能的解決方案是從index.html底部的所有script標簽中刪除type="module"屬性。

還有其他選項可以解決本地文件上與 CORS 相關的問題，但它涉及禁用 chrome 上的安全性，這不是一個好主意。

Answer 2

真的很簡單你可以運行 npm run build / ng build 命令。 構建過程會將所有代碼轉換為等效的 js 代碼，您可以在根項目目錄的“dist”文件夾中找到此轉換后的代碼。 您可以使用查看 index.html 這將是您的基本 html 頁面和其他 js 文件或媒體文件，這些文件是 javascript 文件。 您可以使用 dist 文件夾中的此內容來托管您的網站，該網站將純粹基於 html css 和 js。 您可以使用 nginx 或任何其他服務器來托管它。

Answer 3

在 Angular 中，您可以使用ng build構建您的 angular 應用程序。 這將生成與您編寫的 .ts 代碼等效的純 js 代碼。