标签: angular-universal

我正在 Angular 5 中实现 Angular Universal Rendering，而在生产中 Angular Universal 在我可以轻松部署和运行的本地机器上工作。只需按照此说明链接，它就可以在本地机器上运行https://github.com/angular/angular-cli/wiki/stories-universal-rendering。但是当我开始在 Firebase 中部署 Angular Universal 时，它并没有意外地工作。我关注了这个链接，但信息较少。我需要一些关于如何在 Firebase 中部署 Angular Universal Rendering 的帮助。感谢您的帮助伙计们！谢谢你！

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

https://www.youtube.com/watch?v=gxCu5TEmxXE

file structure like this:

src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({appId: 'something-unique'})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.server.module.ts:

import { NgModule } from '@angular/core';
import …

在搜索了angular Universal很多天后，我发现缺乏有关ServerSideRendering实际工作方式的信息。
让我引导您解决我的疑虑，并帮助我澄清一些模糊点。

有很多指南会告诉您如何设置SSR需要注意哪些事项，例如不访问 DOM 或不使用 jquery。
它们都没有真正展示 angular Universal 在幕后的实际工作方式，尤其是当您访问外部 api 时。

我希望一个普通的 SSR 应用程序只在服务器上运行，创建一些 html，然后加载 html，直到客户端下载 javascript代码。
但是在使用外部 api 的情况下会发生什么？（这是一个非常常见的场景）。
我们的应用程序的服务器版本是否进行了真正的调用，从 api 获取真实数据，以使用 html 进行渲染？还是发生了其他事情？

同样在通过路由解析器调用的外部 api 的情况下。在这种情况下，SSR 可能吗？这意味着我们的应用程序必须以任何一种方式等待 api 响应。

问题类型:错误/问题

描述

我正在使用ng-packagr lib将我的库编译为js.我编译了所有内容没有任何问题,但是当我想要使用ng build --prod(启用AOT)来使用我的库时,我收到错误:

ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'BsDropdownModule' was called.

当我删除.forRoot方法时,我收到错误:

ERROR in : Unexpected value 'BsDropdownModule in /home/sf/Desktop/Developerka/kompilacja/final/sample-repo/node_modules/angular-library-name/free/dropdown/dropdown.module.d.ts' imported by the module 'AppModule in /home/sf/Desktop/Developerka/kompilacja/final/sample-repo/src/app/app.module.ts'. Please add a @NgModule annotation

请注意,这ng --prod --aot=false 不会产生任何错误.

如何重现:

下载repo:https://github.com/Bloodcast69/aot-error,输入 npm install ng build --prod.

预期的行为

想要使用AOT构建没有错误(我需要它与Angular Universal兼容)版本信息

ng-packagr: 2.4.1 @angular/*: 5.2.9 typescript: 2.5.3 rxjs: 5.5.6 node: 8.1.0 npm/yarn: npm: 5.6.0

文件:

app.module.ts: …

我有一个角度通用的应用程序。在构建期间，我尝试firebase-admin在服务器上使用后遇到各种错误。出于某种原因，我可以在需要 firebase-admin 时构建服务器。

构建角度通用服务器

webpack --config webpack.server.config.js --progress --colors

错误

未找到 ./node_modules/hash-stream-validation/index.js 模块中的警告：错误：无法解析“/Users/ohabash/Dropbox/Sites/fornida-ng6/node_modules/hash-stream”中的“fast-crc32c” -验证'

./node_modules/bytebuffer/dist/bytebuffer-node.js 中的警告未找到模块：错误：无法解析“/Users/ohabash/Dropbox/Sites/fornida-ng6/node_modules/bytebuffer/dist”中的“memcpy”

./node_modules/@grpc/grpc-js/build/src/channel.js 中的错误未找到模块：错误：无法解析“/Users/ohabash/Dropbox/Sites/”中的“../../package” fornida-ng6/node_modules/@grpc/grpc-js/build/src'

./node_modules/@google-cloud/firestore/build/src/v1beta1/firestore_client.js 模块中的错误未找到：错误：无法解析“/Users/ohabash/Dropbox/Sites/fornida-”中的“./firestore_client_config” ng6/node_modules/@google-cloud/firestore/build/src/v1beta1'

./node_modules/google-gax/build/src/operations_client.js 模块中的错误未找到：错误：无法解析“/Users/ohabash/Dropbox/Sites/fornida-ng6/node_modules/google”中的“./operations_client_config” -gax/build/src'

./node_modules/@google-cloud/storage/node_modules/mime/index.js 中的错误未找到模块：错误：无法解析“/Users/ohabash/Dropbox/Sites/fornida-”中的“./types/other” ng6/node_modules/@google-cloud/storage/node_modules/mime'

./node_modules/gtoken/node_modules/mime/index.js 中的错误未找到模块：错误：无法解析“/Users/ohabash/Dropbox/Sites/fornida-ng6/node_modules/gtoken”中的“./types/other” /node_modules/mime'

./node_modules/@google-cloud/storage/node_modules/mime/index.js 中的错误未找到模块：错误：无法解析“/Users/ohabash/Dropbox/Sites/fornida-”中的“./types/standard” ng6/node_modules/@google-cloud/storage/node_modules/mime'

./node_modules/gtoken/node_modules/mime/index.js 中的错误未找到模块：错误：无法解析“/Users/ohabash/Dropbox/Sites/fornida-ng6/node_modules/gtoken”中的“./types/standard” /node_modules/mime'

我认为这样的事情可能是一个很好的解决方案，但我不太了解 webpack。/sf/answers/3111508291/

这也是很好的信息。但没有任何帮助。如果我不能用 webpack 编译，那么还有什么方法可以做到这一点？https://github.com/googleapis/google-cloud-node/issues/1821

更新 我修改webpack.server.config.js所以 node_modules 不捆绑。

const nodeExternals = require('webpack-node-externals');

module.exports = {
   ...
   externals: [nodeExternals()],
   ...
}

我认为解决了上述问题，因为该应用程序能够无错误地捆绑。但是现在当我运行构建时，运行时出现错误

错误：找不到模块“zone.js/dist/zone-node”

I have a SSR Angular app which I am trying to transform into a PWA. I want it to be server-side rendered for SEO and for the "fast first rendering" that it provides.

The PWA mode works fine when combined with SSR, but once the app is loaded, when we refresh it, the client index HTML file is loaded instead of the server-side rendered page.

I have dug into the code of ngsw-worker.js and I saw this:

// Next, check …

更新：我创建了一个新项目，进行了每个角度更新，现在在8.2.0上似乎可以正常工作。只需按照以下说明进行操作，但webpack中当前存在一个错误。因此，在构建“ npm run build：ssr”之后，在functions / dist中打开server.js并编辑第3和7行，如下所示：

if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require("./server/main"));
else if(typeof define === 'function' && define.amd)
    define(["require(\"./server/main\")"], factory);
else if(typeof exports === 'object')
    exports["app"] = factory(require("./server/main"));
else
    root["app"] = factory(root["require(\"./server/main\")"]);

（之前：“ factory（require（” require（\“ ./ server / main \”）“））;”）

非常感谢Michele Da Rin Fioretto在“ https://blog.daudr.me/painless-angular-ssr/#comment-4605393279 ” 上为我提供的帮助。如果您遇到相同的问题，请前往那儿并感谢他。

我有一个使用firebase的Angular（8）商店webapp。但是由于我没有使用Angular-Universal，所以无法在产品站点上设置标题/元标记。为了解决该问题，我尝试添加角度通用并将该应用程序部署到Firebase云功能，但是，一旦Firebase接管，便不再匹配任何路由。

我也跟着上angular.io的官方指南，然后切换到fireship.io的辉煌杰夫Delanay的教程链接教程，并在这个题目看了一些媒体的文章像这样的。我创建了（几个）新应用，并反复尝试。只要ssr-express服务器处理请求，一切都可以正常工作（新的angular 8延迟加载箭头功能除外）。先执行“ npm run build：ssr”再执行“ npm run serve：ssr”，但是一旦为Firebase云功能准备了代码并且“ firebase serve”接管了代码，“ localhost：5000”就可以工作，但是打开任何链接就像“ / about”示例一样，控制台输出直接指出没有路由可以匹配。自从我尝试了官方文档和几篇中型文章以来，这肯定是一个非常常见的问题，但是我在这里找不到有关此主题的任何问题。

由于我看不到如何在stackblitz或其他任何地方进行审查，因此，我将尝试（简要地）描述我的所作所为，并在需要的地方显示相应的代码。

tl; dr ：（已过时） Firebase Server Github存储库

（基本上打开firebase服务器，单击按钮并按f5键） …

我有一个最初在Angular 2上开发的应用程序，随着使用Angular发行文档发布新版本的Angular，我逐渐随着时间的推移而迁移。目前，应用程序中的angular版本为：7.2.15

我还应该补充一点，我已经使用@ nrwl / nx将NestJs + Angular项目移动到了单声道存储库中，但是即使尝试在不使用@ nrwl / nx的单声道存储库中将通用添加到我以前的版本中，也会出现相同的错误

现在，当我尝试添加角度通用支持时：

ng add @nguniversal/express-engine --clientProject <my project name>

我收到以下错误：

Module file (/src/app/.ts) not found

这是我遇到的唯一错误，因此很难知道从哪里开始。我也找不到在线报告任何类似的问题。有人知道我该如何解决？

这是ng -v的输出：

Your global Angular CLI version (8.2.0) is greater than your local
version (7.3.9). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ …

我正在尝试在 Heroku 中部署一个Angular Universal Starter示例。

任务npm start失败，因为它无法识别 ts-node。

有没有办法使用 ts-node 在 Heroku 上进行部署？

我创建了一个 angular 通用和 pwa 应用程序。我正在使用带有 flexlayout 的 mat-toolbar 创建导航栏。

我已经在我的模块中导入了 FlexLayoutModule、FlexLayoutServerModule。

我的示例导航栏是

<div [hidden]="loading" class="example-container">
  <mat-toolbar class="example-toolbar">
    <span>Navigation</span>
    <span class="example-spacer"></span>
    <div fxShow fxHide.lt-md>
      <a href="#" mat-button>Menu Item 1</a>
      <a href="#" mat-button>Menu Item 2</a>
    </div>
    <div fxHide fxShow.gt-sm>
      <a href="#">Show Side Menu</a>
    </div>
  </mat-toolbar>
</div>

我有一个 Angular 6+ 应用程序，它被配置为使用Angular Universal来利用服务器端渲染。
我还使用TransferState来避免服务器和客户端应用程序上的重复 API 调用。

我的 angular 应用程序中的身份验证基于令牌。

问题出在用户第一次打开我的 Web 应用程序时，这导致为未经身份验证的用户呈现 index.html，而用户实际上已登录，但没有机会将令牌传输到服务器。因此，当客户端应用程序与服务器应用程序交换时，由于浏览器的localStorage/sessionStorage 中存在令牌，因此需要再次调用API。

我使用 node.js 和 express.js 来实现服务端渲染。

我认为解决方案是使用会话和 cookie。这需要我做很多工作，因为我不熟悉 node.js 来处理会话/cookie。有什么快速简便的解决方案吗？