Javascript 将单页应用程序导出为静态HTML/CSS/JS

我正在寻找将单页角度应用程序转换为旧式html css javascript静态文件的方法，该文件在我的pc上运行，无需任何复杂的

node.js

或任何

npm

我一直在寻找的是

Angular

，我一直在寻找带有轻量级

css

和

js

的

Bootstrap侧边栏

，但是我能找到的所有示例都有很大很大的Javascript文件，所以我看到Angular有一些新颖的侧边栏实现

我想将Angular边栏（Angular application）转换为旧式的

HTML

、

css

和

js

文件，这样我就可以在没有任何复杂节点服务器的情况下运行它们

有没有办法让javascript、css和html脱离Angular应用程序。我听说过

WebPack

，但没有尝试过，因此任何建议都将不胜感激

如果上述过程可以在

React

中完成，请向我推荐一种可靠的方法

---

编辑：我想要的是，我想以

file://path/to/index.html

我不想要HTTP（

http://localhost/index.html

）

在Angular中，您可以使用

ng build

构建Angular应用程序。这将生成与您编写的.ts代码相当的纯js代码

注意

在编译angular项目时，结果已经是一个普通的html/css/js网站。运行angular不需要NodeJ，但与任何网站一样，应该使用http服务器。因此，您的问题是，如果没有Web服务器，您无法从文件打开有角度的网站

解释

您的问题可能是在从浏览器打开生成的

index.html

时控制台中出现错误。它们来自由浏览器实现的改进的安全标准（CORS、严格的mime类型、对本地文件的访问等等）。因为除了声明只有一个空白页之外，您根本没有提供任何错误详细信息，所以这里有一个基本的解决方案

解决方案

构建时尝试将base href设置为

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

该网站应在Firefox上运行，无需进一步操作

在chrome上，可能会出现以下错误之一

在'file://XXXXXXscripts.jsCORS策略已阻止“来自源”的“null”：跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https

或

加载模块脚本失败：服务器响应的非JavaScript MIME类型为“”。根据HTML规范，对模块脚本执行严格的MIME类型检查

如果使用angular 8+，一种可能的解决方案是从

index.html

底部的所有

script

标记中删除

type=“module”

属性

还有其他方法可以解决本地文件上与CORS相关的问题，但这涉及到在chrome上禁用安全性，这不是一个好主意。

这非常简单 您可以运行npm run build/ng build命令。 构建过程将把所有代码转换成等效的js代码，您可以在根项目目录的“dist”文件夹中找到这些转换后的代码。 您可以使用see there index.html作为基本html页面，也可以使用其他js文件或媒体文件作为javascript文件。

---

您可以在dist文件夹中使用此内容来托管您的网站，该网站将完全基于html css和js。您可以使用nginx或任何其他服务器来托管它。

只是为了澄清，运行Angular应用程序不需要“复杂的node.js”设置。您可以将Angular应用程序部署为静态站点。Node.js仅用于开发。如果使用，则设置新项目非常简单。使用CLI构建应用程序后（使用

ng build

命令），你会得到一个

index.html

和一些JavaScript文件。这个

index.html

文件不会运行，也不会在我的浏览器中呈现任何东西，只是

white

或

blank

页面。你是说你想在没有任何HTTP服务器的情况下从文件系统运行应用程序吗？如果您通过HTTP访问

index.html

（

http://localhost

，而不是

file://path/to/index.html

），则JavaScript代码应填充

index.html

。另外，您可能感兴趣。是的-这就是我要找的-我想访问

file://path/to/index.html

nothing HTTP（

http://localhost

）-有什么办法吗？这有帮助吗：

Angular

项目可以通过

ng build

生成，但是html文件在浏览器中打开时，没有任何内容，只是一片空白。我正在寻找一些东西，比如把甘蔗转化成糖，可以储存在普通的袋子里，而不是新奇的npm或者节点