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

Question

我正在寻找将单页 Angular 应用程序转换为旧式 html-css-javascript 静态文件的方法，该文件在我的电脑上运行，无需任何复杂node.js或任何设置npm

我一直在寻找并找到的Angular是，我一直在寻找Bootstrap-sidebar轻量级的css，js但我能找到的所有示例都有很大很大的 Javascript 文件，所以我看到 Angular 有一些新的 Sidebar 实现。

我想在侧边栏角（角应用程序），以旧风格转换HTML，css以及js文件，这样我可以在没有任何复杂的节点服务器运行它们。

有什么方法可以从 Angular 应用程序中获取 javascript、css 和 html。我听说过WebPack但没有尝试过，所以任何建议将不胜感激。

如果上述过程可以在React建议我一个可靠的方法来做到这一点。

编辑：我想要的是，我想访问该文件，因为file://path/to/index.html我不想要 HTTP ( http://localhost/index.html)

Answer 1

笔记

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

解释

您的问题很可能是在打开index.html浏览器生成的结果时控制台出错。它们来自浏览器实现的改进的安全标准（CORS、严格的 mime 类型、对本地文件的访问等）。由于您除了说明您只有一个空白页面之外根本没有提供任何错误详细信息，因此这是一个基本的解决方案

解决方案

Try setting base href to . when building

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

The website should work without further action on Firefox.

On chrome, you may get one of the following errors

Access to script at 'file://XXXXXXscripts.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Or

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec

A possible solution is to remove the type="module" attribute from all script tags at the bottom of index.html if using angular 8+.

There are other options to solve CORS related issues on local files, but it involves disabling security on chrome, which is not a good idea.

Answer 2

在 Angular 中，您可以使用 构建您的 Angular 应用程序ng build。这将生成与您编写的 .ts 代码等效的纯 js。