问题标签 [angular2-universal]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
5895 浏览

angular - 使用类装饰器时需要 Angular2 反射元数据填充程序

我正在尝试使用通用入门示例来了解有关使用 Angular2 进行服务器渲染的更多信息,我想使用 gulp 而不是 webpack。问题是服务器启动时我有:

我看到一些帖子说要添加import 'reflect-metadata';,但这并不能解决我的问题:(我想我错过了一些东西,但不知道它是什么......这是我使用的代码https://github.com/ jaumard/trails-angular2-isomorphic

0 投票
1 回答
317 浏览

isomorphic-javascript - 同构应用程序是否意味着前后站在一起?

我一直在使用Angular 2 Universal进行同构应用程序开发,但有一点我无法弄清楚。

我的理解是,将背面和正面保持在不同的模块上是一种很好的做法,但在使用应用程序时,这似乎不是一种常见的模式MEAN

所以,我即将开始一个可以扩展的项目,我想在未来实现服务器端渲染,但我不知道我应该采用哪种方法。老实说,我觉得将后端和前端分开更舒服,但如果是这样,以后有可能实现服务器端渲染吗?

此外,假设我index.html在两边都复制了,当第一个服务器渲染完成时,服务器是否能够将控制权委托给客户端?我的意思是,鉴于他们不在同一个项目中,我无法想象该代表团将如何工作。

提前致谢。

0 投票
1 回答
1001 浏览

angular - Angular 2 Universal - 使用手写笔和 pug 模板的服务器端渲染

我正在尝试使用 Angular2、typescript、stylus(用于 css)和 pug(用于 html 模板)构建一个应用程序。

但是,我不能让它与 Angular2 Universal 一起工作。

问题是我ts-node用来运行我的服务器代码,每当我导入我的 App 组件时,都会发生错误。

server.ts(节点/快递):

发生错误:

app/modules/app/app.styl:2 margin-bottom: 10px ^ SyntaxError: Unexpected token :

应用程序.ts

应用样式

另一种方法是运行构建代码(由 webpack 生成)。但是我该怎么做,因为代码是由webpackjsonp函数包装的。

0 投票
0 回答
493 浏览

angular - Angular2 Universal 如何处理 ajax 调用?

从他们推出 Angula2 + Universal 的第一天起,我就一直在使用它,但今天我对它的实际工作原理感到困惑。

在他们的示例中,您会在 server.ts 文件中找到:

如果您运行该应用程序,右键单击并查看页面源代码,您会在源代码中找到“此虚假数据来自服务器”,这意味着页面已在服务器中呈现?( 这个对吗 ? )

到目前为止,太棒了。

接下来是在 app.ts 中,您可以找到:

同样,该文本也可以在页面源代码中找到。

现在这对我来说很奇怪:

如果您出于任何原因增加服务器延迟,例如:

这种方式,页面源不会得到文本,但是,如果你这样做:

这一篇,你可以在服务器里找到文字.!!!!!!

到目前为止,根据我的测试,我猜测如果 ajax 调用延迟太长(我猜超过一秒?),您将不会从服务器端渲染中受益。

但 :

但是,如果您增加 app.component.ts 中的 timeOut,例如:

您仍然可以获得服务器端渲染,并且源页面将渲染文本!

这里发生了什么事 ?

显然不是所有的 ajax 调用都可以低于 1 秒,那么无论如何使用通用有什么好处呢?

0 投票
1 回答
319 浏览

angularjs - 在 TodoApp 服务器渲染上找不到指令注释

我正在尝试使用angular2-universal. 我将官方仓库https://github.com/angular/universal/tree/master/examples/src/universal/todo的示例 todo 应用程序复制粘贴到我自己的 Trails/Express 服务器中。

我设法启动了我的服务器,但是当我打电话时http://localhost:3000出现以下错误:

通用回购的例子正在工作,所以我不明白为什么它对我不起作用。我没有更改 angular2 源的任何内容。

我所有的代码都在这里https://github.com/jaumard/trails-angular2-isomorphic配置在这里https://github.com/jaumard/trails-angular2-isomorphic/blob/master/api/controllers/ViewController。 js#L58用于路由,此处用于模板引擎https://github.com/jaumard/trails-angular2-isomorphic/blob/master/config/web.js#L76

0 投票
2 回答
326 浏览

angular - Angular2 Universal,在哪里以及如何学习?

Angular2 Universal 对我来说似乎是某种黑魔法,我找不到从一开始就可以学习这种语言的地方,在官方网站上也没有对该语言的介绍,只有一个文档。我在哪里可以学到这个?谢谢你。

0 投票
7 回答
112461 浏览

javascript - 在 Angular 组件模板中添加脚本标签

Angular2 会<script>自动从模板中删除标签,以阻止人们将此功能用作“穷人”加载器

这里的问题是脚本标签目前的用途不仅仅是加载代码或其他脚本文件。<script>将来也有可能引入围绕标签的更多功能。

目前的一种用途是 JSON-LD,它采用以下格式

通常建议的解决方法是通过钩子动态地将脚本标签添加到文档中ngAfterViewInit,但这显然不是正确的 ng2 做法,并且不会在服务器端工作,而 JSON-LD 显然需要能够做到这一点。

是否有任何其他解决方法可用于<script>在 angular2 模板中包含标签(即使标签在浏览器中是惰性的),或者这是框架过于固执己见的情况?如果在 angular2 中无法解决这种情况,可能存在哪些其他解决方案?

0 投票
0 回答
483 浏览

angular - 当客户拿起时,Angular Universal 是否必须清除组件?

角通用

我正在测试用于服务器端渲染的 Angular Universal(我喜欢它,我认为 Angular Universal 团队的人在将服务器端渲染带入 Angular 方面做得很棒)。我从这里下载了入门工具包。然后我运行设置并在浏览器中查看结果。

当页面加载时,它会非常快地进入,然后块消失并在眨眼间重新出现。为了展示这一点,这里有一些从 google chrome 开发工具中截取的屏幕截图(带有捕获屏幕截图的网络选项卡)。

第 1 部分:382 毫秒

在此处输入图像描述

第 2 部分:400 毫秒

在此处输入图像描述

第 3 部分:925 毫秒

在此处输入图像描述

第 4 部分:1.04 秒

在此处输入图像描述

问题

为什么有些组件在第 3 部分消失,然后在第 4 部分重新出现?还有没有办法阻止这种情况发生?

编辑 1

Angular-Universal 的一个模块是预启动的。使用预引导时,有一个buffer. 我已将此设置为 true,它适用于渲染应用程序。我很快就看到了静态 html,但在等待数据加载时仍然存在问题。这是 Angular-Universal 预引导模块的链接

我是否需要某种存储在服务器和客户端之间以超快的速度传递数据?

0 投票
0 回答
902 浏览

java - 带有java后端的angular 2服务器渲染

我将 angular 2 与 java 后端(tomcat)一起使用。我正在尝试在我的 POC 中实现服务器端渲染。我想知道角度通用是否可以帮助我(在客户端)。我提前道歉,我对 angular AND nodejs 很陌生。

为了理解通用的服务器端渲染,我看了一下https://github.com/angular/universal-starter/tree/masterhttps://github.com/alexpods/angular2-universal-starter

首先,我想知道我对这些项目观察到的行为是否正常:

对于第一个,预引导似乎不起作用,(我在 main.node.ts 中将预引导标志设置为 true):如果我在输入字段中键入内容,则在角度加载时将其删除......

对于第二个,我想知道服务器渲染是否真的有效,因为即使我在我的chrome选项中添加了节流,加载时间也很长,然后页面出现(好像是在所有资产下载后客户端渲染)

另外我不得不说我的 POC 目前可能很幼稚和简单,但我很难理解这些项目的切入点,我的很简单:

html:

系统js:

main.ts(用js编译)

也许我错过了一些对 nodejs 的理解。

最后,有人可以解释一下服务器渲染和客户端渲染的页面版本之间的确切区别是什么?

非常感谢!

0 投票
1 回答
289 浏览

angular - 为什么渲染的 Angular 2 通用服务器具有角度动态属性?

我试图了解通用服务器端渲染的行为。

我看https://github.com/angular/universal-starter/tree/angular-connect项目。

我的第一个理解是,服务器端渲染的版本应该没有由 angular 生成的所有动态 html 属性,然后 angular 加载并设置它想要的动态属性,但对我来说是透明的。

事实上,我观察到服务器端生成的索引是直接“角度注释”的。例如:

(属性名称不是常数)。

我是否认为这个属性是服务器端生成的(由nodejs)?

这个属性有什么用处?

它是如何使用客户端的?

我的最终目标是使用java后端(没有nodejs):我是否必须遵循一些策略来生成这种属性并将它们保持在会话中或类似的东西?

谢谢阅读!