问题标签 [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.

40 问题
Newest
Active
Bountied
318
Unanswered
0 投票
1 回答
1222 浏览

angular2-universal - Angular 2 Universal 404 Not Found 重定向

我正在实现一个路由保护（CanActivate 接口），我需要在某些条件下重定向到未找到的页面。这可以通过以下语句来实现：

这可行，但会引发服务器端异常（错误：发送后无法设置标头），因为无论重定向如何，angular2-universal 仍会发送呈现的页面。

有没有办法正确解决这个问题？

提前致谢。

0 投票
1 回答
354 浏览

angular - Angular2 在使用 JavaScriptServices/Universal 时形成错误

我有一个使用JavaScriptServices starter创建的 Angular2 应用程序。

我遇到的问题是，如果我在组件中有一个表单，则会出现运行时错误。

我正在导入FormsModule和ReactiveFormsModule。

我的表格看起来像这样......

我得到的错误是......

异常：调用节点模块失败并出现错误：预渲染因错误而失败：TypeError: _angular_core.InjectionToken 不是 C:\XXX\ClientApp\dist\main-server.js:35055:42 的构造函数

我错过了什么？当我不使用 JavaScriptServices 启动器进行服务器端渲染时，我的表单设置运行良好。

0 投票
0 回答
188 浏览

node.js - Angular2 服务器端渲染 - Angular 2 通用问题

我尝试将我的 angular2 应用程序更改为 angular2 通用。在那我隔离了服务器和客户端模块。在执行 npm start 时，我收到以下错误。

你能请人帮帮我吗？这是我的文件夹结构https://s11.postimg.org/g5xht8k6b/git.png

我的文件夹结构

0 投票
0 回答
666 浏览

angular - Unable to find plugin: videoJsResolutionSwitcher in angular2-universal

In the first implementation, I used angular2 without server rendering for creating a web player with video.js library and it's "videojs-resolution-switcher" plugin.

I created a directive for initializing videojs element based on component ngOnInitView and load js files directly in base html file (end of body).

Everything was correct and player worked as expected.

Then I started to setting up angular2-universal and server rendering. There was some problems about using browser specific features that I handled them with "isBrowser" tool.

But now I have a problem with videojs-resolution-switcher. Even with old configs in browser's console the error is:

I tried to require the videoJsResolutionSwitcher in directive, but it returns empty object (because it's not exported). Then I changed the plugin code to export the function but nothings changed just the error about updateSrc function was resolved.

I tried to import js file like this:

But at the compile time an error raised about "undefining window" in videojs resolution switcher code.

videojs.ts directive:

UPDATE

After a lot of testing scenarios, I solved this issue with removing "let videojs = require('videojs');" and adding this custom typings definition:

But I'm looking to know conceptually, what was the reason of this behavior?

0 投票
1 回答
2811 浏览

angular - 使用 Angular Universal 进行 Ngx 翻译

我刚刚在我的 Angular 2 通用应用程序中从ng2-translate( v. 5.x.x) 升级到ngx-translate( )。v. 6.x.x

在升级之前，我使用了这个加载器（在这里找到）：

我是这样使用的：

但是，升级到 后ngx-translate，我在终端控制台中收到此错误（因此，服务器端错误）：

因此，任何人都知道如何使用 Angular Universal 为服务器端支持设置自定义加载器ngx-translate？

0 投票
1 回答
2242 浏览

angular - angular2 svgPanZoom，未定义窗口，webpack 问题？

我想在显示 SVG 图像的网站上实现缩放功能。

我看到了这个库github.com/ariutta/svg-pan-zoom，它提供了我需要的确切功能，

但是我似乎无法让它与 angular2 一起使用，无法访问窗口。

经过一些研究，我想我必须将窗口填充到 svg-pan-zoom 的 webpack 导出中。也许我不是在寻找正确的东西，但我认为这是非常惊人的，有这么多的工作需要完成，只是为了导入一个 3rd 方 javascript。我能找到的最好的线索是：https ://github.com/ariutta/svg-pan-zoom/issues/207编辑：见答案。

我使用了这个 Angular 2 aspnet 核心启动项目： https ://damienbod.com/2017/01/01/building-production-ready-angular-apps-with-visual-studio-and-asp-net-core/

编辑：实际上是这个 https://github.com/MarkPieszak/aspnetcore-angular2-universal但是分支在我发布这篇文章时得到了更新，这让我感到困惑

我这里有这个服务，

svg-pan-zoom.service.ts

这里称为 map.component.ts

我的 app.module 中引用了 SvgPanZoomService 服务

我的 package.json 中引用了 Svg-pan-zoom 库，

最后，我的构建给了我 2 个 js 文件，main-client.js 和 vendor.js

我可以浏览 main-client.js 并看到它引用了 svg-pan-zoom，
当我的页面加载时它出现在我的浏览器源中

但是当谈到加载它应该做的事情的部分时，我得到了这个错误。

现在我读到我不打算从组件访问窗口，但我对 lib 调用的内容没有发言权，我在这里读到某处添加(isBrowser)应该验证我没有调用这个服务器端（为什么我希望服务器缩放这个你是对的吗？）

这是我的 webpack.config.js

该应用程序然后加载另一个 webpack.config.vendor.js

我还有 2 个与 webpack.config.js 相关的文件 boot-client 和 boot-server，它们是用于打包服务器和客户端文件的说明。

谢谢。

0 投票
2 回答
1397 浏览

javascript - Angular4 通用服务器端渲染将返回更多应请求渲染的 HTML

我正在尝试使用universal和angular4 ..一切正常，也可以通过哈希路由直接访问..但问题是请求总是显示<body><demo-app></demo-app></body>

我希望里面有一些html标签和信息<demo-app></demo-app>

这是我如何实现的：

我的版本是 "@angular/common": "^4.0.0"

使用https://github.com/angular/universal/blob/master/modules/ng-express-engine/src/main.ts和import { ngExpressEngine } from '@nglibs/universal-express-engine'

在这个讨论之后，我可以看到这是一个新的实现

尝试按照建议导入，但不起作用（命名空间不存在）

  • 从“@universal/ng-express-engine”导入 { ngExpressEngine}

按照此拉取请求中的建议使用版本 rc.5 进行了测试。

最后，按照这个链接

https://github.com/angular/universal/tree/master/modules/ng-express-engine

用这个库测试给了我同样的结果：

import { ngExpressEngine } from '@nguniversal/express-engine';

至少项目正在运行，所以我可以继续编码和使用它..但期待有一个完整的服务器端渲染。

谢谢！

0 投票
1 回答
540 浏览

node.js - Angular 2 通用 + Akamai

我想看看我是否可以基于 CDN 和 Angular 2 Universal 创建一个堆栈。所以当用户导航时有CDN获取资产，如果用户第一次访问就会有Universal渲染的完整html。

我在想：

客户端 <===> Akamai <===> Varnish <===> 源服务器（具有通用的 node.js）

这听起来不错？你有没有尝试过？另外我正在考虑为整个堆栈添加 nginx 和 ELB。

问题是： - 这个堆栈可以按预期工作吗？

0 投票
1 回答
1058 浏览

angular - angular 4 Universal - 服务器和浏览器的不同组件/模块

所以我有一个简单的 jquery 插件包装器，但显然由于缺少浏览器全局对象，包装器在通用上出错了。

像大多数 jquery 插件一样，这个插件也

我想知道是否有一种简单的方法可以让我们拥有两个不同版本的组件/模块，一个用于通用，一个用于非通用。

Universal 确实有一个单独的启动“应用程序”模块（用于加载 BrowserAnimationsModules 与 NoopAnimationsModule），但这仅适用于这些模块导出服务。

0 投票
1 回答
872 浏览

angular - 如何将 Angular 4 通用应用程序部署到 Firebase

随着universal angular 4的介绍，我无法弄清楚如何将应用程序成功部署到firebase托管。我按照这里的步骤 https://github.com/angular/angular-cli/wiki/stories-universal-rendering

我无法弄清楚它的这一部分：

“生成的包在来自 webpack 的文件名中有一个哈希值。将其部署到生产服务器时，您需要通过重命名文件或将包名称作为参数传递给服务器来确保需要正确的包。”

通常我们只使用 ng build --prod

然后 firebase 部署 dist 目录。

有了这个通用包含，我应该将哪个文件夹部署到 firebase？

dist-server 还是 dist？


12345678910