如何从 Angular 项目中使用 javascript 导出独立的 html/css？

Posted 2023-03-13

【中文标题】如何从 Angular 项目中使用 javascript 导出独立的 html/css？

【英文标题】：How to export standalone html/css with javascript from angular project?

【发布时间】：2021-11-12 02:04:30

【问题描述】：

我有一个带有 html/CSS/component(.ts 文件)/service(.ts 文件)的 Angular 项目。 服务方法正在从 assets 文件夹中的 .json 文件中读取数据（不调用后端）。

我正在做一个产品构建，它将在 dist 文件夹中生成 html/CSS/javascript 文件。

问题是生成的 index.html 文件没有渲染，在没有服务器（应用程序服务器）的浏览器中显示空白屏幕。我的要求是让这个 HTML 离线工作。

如何将独立的 html/CSS/javascripts 导出为 Angular 项目中的离线 html？

生成的 dist 文件夹结构：

【问题讨论】：

你看控制台了吗？有什么错误吗？是否有任何不应该触发的http请求？您需要向我们提供有关此“空白页”的更多详细信息。

这是正常的。您必须在服务中托管您的 dist 文件才能查看应用程序。在开发过程中，我们通常使用ng serve

@Gaël J，控制台没有错误。 http请求很好（无论如何这些是来自json文件的静态数据，工作正常）。问题通常是，如何将 Angular 项目转换为无需任何服务器即可工作的静态文件集（html/js/css/json）。

明白，到目前为止你做对了。如果您编写的代码不需要任何服务器，则 prod build 的输出可以在没有任何服务器的浏览器中使用。这就是为什么我们需要更多细节

【参考方案1】：

您可以使用http-server 包来做到这一点。

首先安装全局包

npm install http-server -g

然后在你的项目目录中（在终端中）运行

http-server dist/

如果您使用的是 Angular 6+ 或更高版本（使用 Angular 10），则必须运行

http-server dist/your-project-name

现在你可以访问 http://localhost:8080 来查看你的应用了

【讨论】：

感谢您的建议，我们希望将此 html/js/data 导出并提供给用户，以便他们可以离线使用（无需任何服务器）。对此有什么建议吗？