问题标签 [angular-universal]

我正在尝试执行Angular Universal 快速入门，但在运行“node server.js”时出现此错误。

我正在将通用添加到现有的 Angular 2 应用程序中。

如何摆脱错误？

编辑：运行 npm 安装时出现几个错误：

和

我把它改成了这个，但它抛出了错误：

错误：

我创建了一个带有延迟加载路由的 Angular 2 / Angular Universal 应用程序，如下所示：

当我localhost在浏览器中导航到时，它会重定向到/home并且一切正常。但是每当我localhost/home通过硬重新加载进入浏览器时，我的 Node.js 终端都会抛出一个错误：

不过，它似乎正确地渲染了视图。

当我将路线更改为使用非延迟加载方式时，错误消失了：

但我想在我的应用程序中使用延迟加载。在我的 HTML 中，我使用 SystemJS 导入客户端应用程序：

我的依赖：

我该如何解决这个问题？

我只是想在 VS Code中调试Angular 2 Universal Starter上的服务器端代码。Angular 2 Universal Starter实际上使用了 VS Code，甚至还有一个 launch.json 文件。

我在 VS Code 的后端代码中设置的断点永远不会暂停执行。该应用程序根本没有被原始编辑，除了我编辑了launch.json文件，因为它需要编辑。

这是原文：

这是我的编辑：

我相当确定 src/client.ts 是应用程序的入口点。我已经完成了这个终端命令来创建源映射：

结果是这些错误：

我不确定它们是否重要。

我尝试在 VS Code 中启动调试器并得到这个停止调试的错误：

如何摆脱错误以成功调试代码？

当我只运行 vs 代码调试器而不使用npm start时，它似乎托管了我的应用程序，因为我可以在 Chrome 中浏览到它而无需运行npm start。我的应用程序在端口 3000 上，我的调试器在端口 5858 上。今天早些时候没有这个问题。我在运行我的 Angular 通用应用程序然后运行我的调试器来调试 node.js 后端时收到此错误，因为两个进程正在尝试使用相同的端口。这意味着我无法使用 GUI 触发我的后端功能，因此很难测试后端。为什么调试我的应用程序似乎托管它？

这是我的 launch.json 文件：

这是我不托管我的应用程序时的调试控制台npm start：

这是我已经托管我的应用程序时的调试控制台npm start：

编辑：当我在launch.json中将其设置为false时，它也会停止调试器，所以我的vs代码可能刚刚损坏。我可能需要重新安装它，尽管我试图避免它，因为我有很多扩展。

当我将应用程序运行的端口更改为 4000 时，我在调试时遇到相同的错误，但为 4000：

我已按照本教程启动 angular2 并使用 ASP.NET Core 运行。

我已将 Angular 包升级到 2.3.1 版

现在angular2-universal@2.0.10抱怨 zone.js@0.6.21 的对等依赖

如果我通过npm @angular/core@2.3.1安装zone.js@0.6.21抱怨zone.js@0.7.2的对等依赖

@angular/core@2.3.1和angular2-universal@2.0.10 是否不兼容，因为它们依赖于不同版本的zone.js包？

在这方面的任何帮助将不胜感激。

我正在做一个 POC 来证明我在 Angular Universal 的后端和前端之间进行了通信。我在后端有一个名为 heros.json 的 JSON 文件，我想ModelService从model.service.ts.

我有这个文件夹结构：

在model.service.ts（前端）内，我想创建一个 http 请求以在名为getStuff().

我在model.service.ts中有这个：

我从前端组件调用 ModelService.getHeroes：

我收到此错误：

所以我在服务中的网址private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file是错误的。鉴于该文件夹结构，网址是什么？因为实际运行的项目，输出，在 dist 中：

所以我不知道该放什么ModelService.heroesUrl。应该有什么字符串值ModelService.heroesUrl？

我正在angular2使用服务器创建客户端应用程序node.js。客户端应用程序似乎工作得很好，这意味着：

• 我所有的请求都得到了适当的回应。
• 应用程序按预期加载和工作。

但我在终端收到此错误：

这不会中断webpack或http-server。
问题是我为什么要面对这个以及如何解决它？

我使用https://github.com/aspnet/JavaScriptServices/tree/dev/templates/Angular2Spa上的模板作为 Angular Universal SPA 的起点。它呈现 Angular 根组件，如下所示：

我希望我的一些 Angular 组件能够修改 HTML 标头的内容（例如设置标题标签或添加额外的元标签）。

请记住，模板使用 Razor 来呈现页面的头部，对于如何实现这一点有什么建议吗？

我使用 Razor 处理的唯一事情是 asp-append-version 标签助手，因此将所有 HTML 呈现移动到 Angular 组件中是一种选择（前提是我有办法以某种方式维护缓存清除）。

提前致谢！

这里有一个关于使用 localstorage 和 angular2 的很好的问答。https://stackoverflow.com/a/39098748/6203604

这种方法似乎适用于“npm start”。但是，当您运行“npm run build”时，错误：

出现“typeof ../browser.module”类型时不存在属性“window”。

在https://github.com/angular/universal-starter上的“通用陷阱”中，它说

窗口、文档、导航器和其他浏览器类型 - 在服务器上不存在 - 因此使用它们或任何使用它们的库（例如 jQuery）将不起作用。如果您确实需要其中一些功能，您确实有一些选择：如果您需要使用它们，请考虑将它们限制在您的 main.client 中，并使用从 Universal 导入的 isBrowser / isNode 功能根据情况包装它们。从 'angular2-universal' 导入 { isBrowser, isNode }; 另一种选择是使用“@angular/platform-b​​rowser”中的 DOM

isBrowser 包装器或使用平台浏览器是否适合在这里引用 localStorage？如何最好地写这个的任何例子？

例如，在 browser.module.ts 中，是否应该为可分发包包装 window.localStorage？

与“npm run build”可分发包一起使用的东西？

此外，在运行 npm start 时，我收到错误消息：Unexpected token u。

这似乎来自文件 node.module.ts 中 useValue 中的“u”，因为它消失并被替换为“没有令牌 LocalStorage 的提供者！”

任何人得到类似的东西。想法？

2018 年 5 月 24 日更新：我们现在是我原来帖子中 Angular 的 +3 版本，但仍然没有最终可行的解决方案。Lars Meijdam (@LarsMeijdam) 提出了一种有趣的方法，当然值得一看。（由于专有问题，他不得不暂时删除他最初发布示例的 GitHub 存储库。但是，如果您想要副本，可以直接给他发消息。请参阅下面的评论以获取更多信息。）

Angular 6 最近的架构变化确实让我们更接近解决方案。此外，Angular Elements ( https://angular.io/guide/elements ) 提供了一些组件功能——尽管与我最初在这篇文章中描述的不太一样。

如果 Angular 团队中的任何人碰巧遇到了这个问题，请注意似乎还有很多其他人也对这个功能非常感兴趣。积压工作可能值得考虑。

Angular 2我想在一个、、、或应用程序Angular 4中实现一个可插入（插件）框架。Angular 5Angular 6

（我开发这个可插拔框架的具体用例是我需要开发一个微型内容管理系统。由于许多原因，此处未必详细说明，Angular 2/4/5/6它几乎完美地满足了该系统的大多数需求。）

通过可插入框架（或插件架构），我特别指的是允许第三方开发人员通过使用可插入组件来创建或扩展主要应用程序的功能而无需直接访问或了解主要应用程序源代码的系统或内部运作。

（关于“没有直接访问或了解应用程序的源代码或内部工作原理”的措辞是核心目标。）

可插入框架的示例包括常见的内容管理系统，如WordPress或Drupal.

理想的情况（与 Drupal 一样）是能够简单地将这些可插入组件（或插件）放入文件夹中，让应用程序自动检测或发现它们，并让它们神奇地“工作”。以某种可热插拔的方式发生这种情况，这意味着在应用程序运行时，将是最佳的。

我目前正在尝试确定以下五个问题的答案（在您的帮助下）。

1. 实用性：应用程序的插件框架是否Angular 2/4/5/6实用？（直到现在，我还没有找到任何实用的方法来创建一个真正的可插拔框架Angular2/4/5/6。）
2. 预期挑战：在为应用程序实现插件框架时可能会遇到哪些挑战Angular 2/4/5/6？
3. 实施策略：可以采用哪些特定技术或策略来实施Angular 2/4/5/6应用程序的插件框架？
4. 最佳实践：为Angular 2/4/5/6应用程序实现插件系统的最佳实践是什么？
5. 替代技术： 如果插件框架在应用程序中不实用Angular 2/4/5/6，那么哪些相对等效的技术（例如React）可能适用于现代高反应性 Web 应用程序？

一般来说，使用Angular 2/4/5/6是非常可取的，因为：

• 它自然非常快——非常快。
• 它消耗很少的带宽（在初始加载之后）
• 它的占用空间相对较小（在AOT和之后tree shaking）-并且占用空间继续缩小
• 它功能强大，Angular 团队和社区正在继续快速发展其生态系统
• 它与许多最好和最新的 Web 技术配合得很好，例如TypeScript和Observables
• Angular 5 现在支持服务工作者（https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7）
• 得到支持Google，它很可能在未来得到很好的支持和增强。

我非常想Angular 2/4/5/6用于我目前的项目。如果我能够使用Angular 2/4/5/6，我也将使用Angular-CLI并且可能Angular Universal（用于服务器端渲染。）

到目前为止，关于上述问题，这是我的想法。请查看并提供您的反馈和启示。

• Angular 2/4/5/6应用程序使用包——但这不一定与允许在应用程序中使用插件相同。Drupal基本上可以通过将插件文件夹拖放到系统自动“拾取”的公共模块目录中来添加其他系统中的插件（例如）。在Angular 2/4/5/6中，一个包（可能是一个插件）通常通过 安装npm，添加到package.json，然后手动导入到应用程序中——如app.module. Drupal这比删除文件夹并让系统自动检测包的方法复杂得多。安装插件越复杂，人们使用它们的可能性就越小。如果有办法就更好了Angular 2/4/5/6自动检测和安装插件。我非常有兴趣找到一种方法，它允许非开发人员安装Angular 2/4/5/6应用程序并安装任何选择的插件，而无需了解所有应用程序的架构。

• 一般来说，提供可插拔架构的好处之一是第三方开发人员很容易扩展系统的功能。显然，这些开发人员不会熟悉他们正在插入的应用程序的所有复杂代码。一旦开发了插件，其他技术含量更低的用户可以简单地安装应用程序和任何选定的插件。但是，Angular 2/4/5/6相对复杂，学习曲线非常漫长。更复杂的是，大多数生产Angular 2/4/5/6应用程序还使用Angular-CLI、Angular Universal和WebPack. 正在实现插件的人可能必须至少对所有这些如何组合在一起有一些基本知识 - 以及强大的工作知识TypeScript并且对NodeJS. 知识要求是否如此极端以至于没有第三方愿意开发插件？

• 大多数插件可能会有一些服务器端组件（例如，用于存储/检索插件相关数据）以及一些客户端输出。Angular 2/4/5特别（并且强烈）不鼓励开发人员在运行时注入他们自己的模板——因为这会带来严重的安全风险。为了处理插件可能适应的多种类型的输出（例如图形的显示），允许用户创建以另一种形式注入响应流的内容似乎是必要的。我想知道如何在不破坏Angular 2/4/5/6安全机制的情况下满足这种需求。

• 大多数生产应用程序都使用( ) 编译Angular 2/4/5/6进行预编译。（可能全部都应该。）我不确定如何将插件添加到（或集成到）预编译的应用程序中。最好的方案是与主应用程序分开编译插件。但是，我不确定如何使这项工作。回退可能是使用任何包含的插件重新编译整个应用程序，但这对于只想安装应用程序（在他自己的服务器上）以及任何选定的插件的管理用户来说有点复杂。Ahead of TimeAOT

• 在Angular 2/4/5/6应用程序中，尤其是预编译的应用程序中，单个错误或冲突的代码可能会破坏整个应用程序。Angular 2/4/5/6应用程序并不总是最容易调试的。应用不良插件可能会导致非常不愉快的体验。我目前不知道有一种机制可以优雅地处理行为不端的插件。