问题标签 [angular-universal]

当前支持 Angular 2.0 的所有插件似乎都不支持 Angular Universal。由于直接DOM访问，它显示错误。我想以 Angular DOM2 方式更改访问代码。任何人都可以为窗口queryselector()、文档、、、、、等querySelectorAll()建议angular 2 方式吗？document.getElementsByTagname()getElementsByClassName()

是否可以根据条件导入模块？仅当 Angular 2 通用应用程序在浏览器中而不是在服务器中呈现时，才具体导入外部模块。

这个问题与一些依赖浏览器功能并且只能在浏览器中呈现的 PrimeNG 模块有关。在服务器渲染中省略它们会很棒，因为日历和其他组件对 SEO 并不重要。

目前，如果关闭服务器渲染，我可以渲染日历组件。但是，当我在 app.module.ts 中包含以下代码并打开服务器渲染时，服务器会在 button.js 中产生错误“ReferenceError：事件未定义”。

angular 提供了一个 isBrowser 条件。

但我不知道如何将它用于条件导入。真的有办法为模块做到这一点吗？

我目前在我们的 Angular 2 + Universal（服务器端渲染）项目中为 i18n 支持而苦苦挣扎。我希望每种语言都有不同的捆绑文件（例如 /server/bundle_EN.js 和 /server/bundle_DE.js）。

它确实适用于客户端渲染，但我不知道如何对服务器端渲染做同样的事情。因为节点服务器启动一次后需要使用不同的模板文件（取决于当前的客户端语言）。

是否可以使用 AoT 预编译项目并分离语言文件夹并在服务器上使用它们？

谢谢！

我在使用 ng2-bootsrap 轮播时遇到问题。当页面中的轮播代码被注释掉时，页面 (/home2) 加载正常。但是当轮播代码运行时，浏览器会一直等待服务器提供页面（服务器永远不会），导致页面为空。仅供参考，我正在使用 Angular Universal Starter 项目。

这是 home2 组件中 myInterval 设置为 5000 的轮播代码：

这是服务器端的输出（快递）：

这是服务器上的控制台日志语句：

在我看来，Angular Universal 陷入了一个循环。这是实现：禁用间隔以避免无限循环的室内设计理念。如果有人能告诉我如何解决这个问题，我将不胜感激。任何建议将不胜感激。

谢谢

我目前使用这个代码片段来获得视差效果：

我想知道是否有另一种使用 jquery 插件的方法，而不必使用 isBrowser 验证所有组件

我已经设置了角度通用，我有一个小项目，有 4 条静态路由，每个项目有 1 条路由（/products/:id）。

既然有一个 nodeJS 服务器正在处理 SSR，那么这如何融入整个画面？

以前，我的index.htmlapache 服务器上只有 angular 2 js 代码。现在我使用的是通用的，带有节点 js 服务器，这如何适合等式？我对这个领域真的了解不多。

我不确定我的问题是否也很清楚，因此我非常感谢您对此的任何意见。

我有一个在我的应用程序中使用的函数，该函数的参数之一是一个对象：

但是，我在提供项目时收到的唯一错误是：

ReferenceError：localStorage 未在 Object 中定义。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4145:23) 在webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)在对象。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4119:67) 在webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)在对象。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1728:69) 在webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)在对象。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1803:70) 在webpack_require（/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30）在对象。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1509:79) 在webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)

如何检查 localStorage 是否存在？

几个月前，我发布了我的第一个 angular2 应用程序，一切都是彩虹和独角兽。但是我注意到谷歌无法读取我的异步内容。

因此我需要在我的应用程序中实现角度通用渲染。我已经在universal.angular.com 上尝试过快速入门，但我无法让它工作。（错误：http: //jmp.sh/VIVVfYw）

你可以在这里看到完整的代表，因为我也将其开源：https ://gitlab.com/epenance/kuhrefysio

我非常感谢我能得到的任何帮助，因为感觉就像我只是把头撞在墙上一样。

任何人都有使用 Angular cli 项目安装 Angular Universal 的经验吗？

我尝试遵循本指南：

https://universal.angular.io/quickstart/

但是在我这样做之后：

我得到错误：

我尝试将 Angular 官方国际化工具与 Angular Universal 一起使用。到目前为止，我可以使用以下过程翻译客户端渲染（感谢这个答案https://stackoverflow.com/a/40930110/1110635）：

我添加了“i18n”属性，如我的模板中的文档中所述：

./src/+app/about/about.component.html ：

然后我运行：

生成基本的messages.xlf文件。

然后，我将这个文件复制为我想要支持的每个语言环境，作为“语言环境”文件夹中的“ messages.[locale].xlf ”。准备就绪后，我为每个包含导出内容字符串的 xlf 文件创建一个“ messages.[locale].ts ”：

./locale/messages.fr.ts ：

最后，我的client.ts文件如下所示：

./src/client.ts ：

这有效并使“客户端”应用程序按预期工作。“关于”被“ A 提议”取代。但是，因为 Angular Universal 使用 express 在服务器端预渲染页面，所以在客户端引导完成之前不会翻译文本。

因此，当您第一次进入页面时，您会看到大约 1 秒钟的“关于”，然后客户端才会将其替换为“ A 提议”。

解决方案似乎很明显，只需在服务器端运行翻译服务！但我不知道该怎么做。

我的server.ts看起来像这样：

./src/server.ts

我无法像在客户端那样直接访问bootstrapModule方法。“ createEngine ”参数对象上的providers键已经存在于原始server.ts代码中。

我错过了什么？