使用 Angular Universal 将 Angular 8 应用程序转换为静态应用程序

Question

我最近从 Themeforest 购买了一个使用Angular 8.1.2构建的主题。 我的客户想要这个主题的完全静态（HTML + vanilla JS）版本，以在完全服务器端呈现的应用程序中使用。

Themeforest 只有 React 和 Angular 版本，所以我尝试使用 Angular Universal 将我的 Angular 8 主题转换为静态站点。

我的完整 package.json 位于https://pastebin.com/ga20p1CV我在下面分享 package.json 的相关部分

"build:client-and-server-bundles": "ng build --prod && ng run myapp:server:production --bundleDependencies all",
"build:prerender": "npm --max_old_space_size=8096 run build:client-and-server-bundles && npm --max_old_space_size=8096 run compile:server && npm run generate:prerender",
"build:ssr": "npm --max_old_space_size=8096 run build:client-and-server-bundles && npm --max_old_space_size=8096 run compile:server",
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"generate:prerender": "cd dist && node prerender",
"serve:prerender": "cd dist/browser && http-server",
"serve:ssr": "node dist/server"

SSR 正在使用 Universal ，我可以从 Node 服务器在 dist 文件夹中运行生成的站点。

但是，Node 服务器呈现的 HTML 仍然充满了 Angular 指令。 它与 ng build 命令呈现的输出没有什么不同。

我下载了 Node 服务器呈现的 HTML 并将其作为静态 Web 应用程序运行。 如果我改变了里面的任何东西

<app> .... </app>

它显示一秒钟，然后立即被原始内容替换。 也就是说，Angular 仍然在客户端渲染内容。

有什么方法可以阻止客户端渲染“app”标签内的 DOM？

Answer 1

您将始终在生成的 html 中使用角度组件标记。

Angular Universal 执行请求页面的服务器端渲染，并将该页面的 html 发送到客户端。 一旦浏览器完成了这个页面的渲染，“普通的”客户端 angular 应用就会接管导航和渲染。