标签: angular-universal

import * as admin from 'firebase-admin';
var serviceAccount = require('./keys/keyfile.json');
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://test.firebaseio.com"
});

var registrationToken = "--some-key--";

var payload = {
  notification: {
    title: "$GOOG up 1.43% on the day",
    body: "$GOOG gained 11.80 points to close at 835.67, up 1.43% on the day."
  },
  data: {
    stock: "GOOG",
    open: "829.62",
    close: "635.67"
  }
};


function panelMessage(){
admin.messaging().sendToDevice(registrationToken, payload)
  .then(function(response) {
    // See the MessagingDevicesResponse reference documentation for
    // the contents of response.
    console.log("Successfully sent message:", response); …

嗨我正在使用Angular版本4.3,我已经实现了本文中提到的服务器端呈现.

https://medium.com/@cyrilletuzi/angular-server-side-rendering-in-node-with-express-universal-engine-dce21933ddce

当我点击服务器URL以使服务器端呈现HTML时,组件的初始数据确实出现,这些数据是静态的,不依赖于任何API调用.

但问题是渲染不包含完成AJAX请求后应该存在的数据.

我在我的组件的ngOnInit方法中编写了API调用.它调用一个服务,该服务调用angular的http服务的get方法来获取数据.角度通用渲染确实调用此函数.呼叫已作出,但不等待响应返回.它改为返回初始数据.在服务器控制台中一段时间​​后,我确实看到响应已经回到服务器.但到那时,角度普遍已经回归.

请帮忙解决这个问题.

我正在 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”

我正在使用TransferState进行SSR,并想知道当我们这样做时谁保证

http.get(...).subscribe(data => {
  transferState.set(DATA_KEY, data)
})

数据将存储在transferState中？因为http.get是异步操作,并且可以生成内容并将其提供给没有此数据的客户端.

更新：我创建了一个新项目，进行了每个角度更新，现在在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".

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

我最近使用 ng update 将我的项目从 angular 7 更新到了 8。一切正常，但我发现 Angular Universal 没有更新到版本 8。

当我检查我的 ng 更新时，我有这条线

ng update @nguniversal/aspnetcore-engine

但是当我尝试更新时出现以下错误：

Package '@nguniversal/aspnetcore-engine' is not a dependency.

Angular Universal 没有更新，这里是我的 package.json。我如何更新 Angular Universal 以及为什么不能使用 ng update。

"dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/platform-server": "^8.2.14",
    "@angular/pwa": "~0.803.23",
    "@angular/router": "^8.2.14",
    "@angular/service-worker": "8.2.14",
    "@ngrx/effects": "8.6.0",
    "@ngrx/entity": "8.6.0",
    "@ngrx/router-store": "8.6.0",
    "@ngrx/store": "^8.6.0",
    "@ngrx/store-devtools": "8.6.0",
    "@nguniversal/common": "^7.1.1",
    "@nguniversal/express-engine": "^7.1.1",
    "@nguniversal/module-map-ngfactory-loader": "^7.1.1",
    "@taoqf/javascript-state-machine": "^3.0.8", …