标签: angular-universal
将链接 amphtml 附加到 angular 应用程序的头部
我有一个有效的 angular 通用应用程序，我有一个特定页面的 amp 版本。为了使 amp 页面可访问，我必须添加到页面的<head>this 标签中
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
所以我需要类似于MetaService 的东西。
我的问题是如何在 angular 5 应用程序的特定组件中执行此操作？
推荐指数
解决办法
查看次数
Angular Universal - 仅适用于爬虫机器人
我在我的应用程序中使用 Angular Universal，但是当页面加载（服务器版本和实际应用程序之间的转换）时，我有一些奇怪的闪烁。并且它不适用于我的具有 Guards 的路线（例如用户帐户页面）。
我只需要 SSR 来进行 SEO...那么也许有一种方法可以仅将 SSR 用于爬虫机器人？并为用户提供经典的 Angular 应用程序？
目前，我使用 Angular 通用存储库中的相同 server.ts。
谢谢 ！
推荐指数
解决办法
查看次数
如何在 Angular 5 Universal 应用程序中排除浏览器模块
我正在尝试创建一个 Angular Universal 应用程序，在构建时构建特定路由，将 AppShell 注入 Index.html 页面，作为尽快在用户面前获取有意义内容的一种方式（当 Angular 应用程序正在下载时）。我正在按照Angular 大学的说明进行操作，并按照说明进行操作。但是，当我系统地将现有应用程序的功能添加到此测试应用程序中时，我遇到了“意外令牌导入”错误，该错误源于浏览器应用程序所需的第 3 方插件，但对于非常简单的服务器应用程序我不需要我正在尝试构建并注入 Index.html 作为我的 App Shell。
我花了几个小时研究这个，发现有很多帖子推荐 webpack，但是，我使用的是 Angular CLI。我不确定如何将 webpack 与 Angular CLI 构建过程结合起来。
我发现这篇文章似乎表明您可以使用 tsconfig.server.json 的排除部分从 Angular Universal 构建中排除模块。我已经尝试在 tsconfig.server.json 中列出要排除的模块，但是，我仍然收到“意外的令牌导入”错误。
我有一条路线需要构建并注入到我的索引页面中。我希望/认为我应该能够排除我的绝大多数应用程序，因为它与创建 AppShell 无关。我认为 Angular 应该简单地构建为服务器应用程序注册的路由所需的必要位。
我使用的是 Angular CLI 版本 1.7.3 和 Angular 版本 5.2.4。
有没有人知道如何从构建到 Angular Universal 应用程序中排除不必要的模块？
谢谢你的时间。
推荐指数
解决办法
查看次数
如何从角度通用构建中删除 sourceMappingURL？
我正在使用这个 repo 作为基础。我已经解决了几乎所有其他插件的错误，但我无法解决这个错误。
在进行 SSR 构建时，没有其他插件需要 .map 文件，因为它是生产版本。但我不知道它是从哪里爬进来的。
这是导致错误的行。在server.js文件中。
margin: -1px 0; }\n\n/*# sourceMappingURL=swiper.component.css.map
我不想每次进行构建时都手动删除它，因此如何解决问题以及问题可能是什么。
错误 出了点问题，请稍后再试！错误 { 错误：未捕获（承诺）：错误：无法匹配任何路由。URL 段：'swiper.component.css.map' 错误：无法匹配任何路由。URL 段：CatchSubscriber.selector (E:\xampp\htdocs\havemybooks\ dist\server.js:146195:29) 在 CatchSubscriber.error (E:\xampp\htdocs\havemybooks\dist\server.js:29486:31) 在 MapSubscriber.Subscriber._error (E:\xampp\htdocs\havemybooks\ dist\server.js:20931:26)
更新：
我发现罪魁祸首是具有内联的插件/*# sourceMappingURL=swiper.component.css.map */
所以是否有 webpack 配置来替换已经存在的内联源映射。
我尝试--devtool false使用 webpack 但没有成功
推荐指数
解决办法
查看次数
Angular 中具有 (RE)Hydration 的 SSR
Angular Universal 用于服务器端渲染。
我有一个功能齐全的 Angular 应用程序。增加FCP。我需要通过服务器端渲染来补充水分。
Angular 是否通用允许动态 SSR。在服务器端加载某些组件？
我找不到任何与此相关的内容。（是的，我做了一些谷歌搜索）。
我在这里找到了类似的主题，但我需要了解更多。
Angular 和 Angular Universal 之间的决策边界。
在这里找到了一些相关的文章。
它是否将数据绕过到后端，或者它不关心数据，只渲染静态数据？
角度通用中是否可能出现以下情况
如果我在一个页面上有三个组件
<Comp1></Comp1>
<Comp2><Comp2>
<Comp3><Comp3>
Comp1 和 Comp3 大部分是静态的。Comp2 是用户特定的。我不希望 comp2 在服务器端呈现。Comp1 和 Comp3 来自服务器渲染，Comp2 来自客户端。
推荐指数
解决办法
查看次数
在 Firebase 上部署 Angular 8 Universal (SSR) 应用程序
我最近将我的 Angular 8 应用程序升级为通用应用程序 (SSR)。在它成为 SSR 应用程序之前，我已将其部署到 Firebase，但后来我发现使用常规 Firebase 托管无法在 Firebase 上部署 SSR 应用程序。我做了一些研究，发现我必须使用Firebase Cloud Functions。
我使用以下方法创建了一个 SSR 应用程序：
ng add @nguniversal/express-engine --clientProject PROJECT_NAME
PROJECT_NAME可以在angular.json下面的文件中找到"projects"。
谁能帮我这个？
推荐指数
解决办法
查看次数
Angular 9 SSR Build Serve 错误——错误参考错误：文档未定义
错误参考错误：文档未定义
import { readFileSync } from 'fs';
const domino = require('domino'); // import the library `domino`
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString(); // use `index.html` as template
const win = domino.createWindow(template); // create object Window
global['window'] = win;
global['Event'] = win.Event; // assign the `win.Event` to prop `Event`
global['document'] = win.document;即使在 Server.ts 中添加这个修复问题但在性能 TTFB 时间太高。任何有解决方案...？
推荐指数
解决办法
查看次数
Angular ssr，页面重新渲染问题
我是 Angular ssr 的新手，你可以看到下面的代码
问题
如果我直接进入客户端路由，首先它会显示
由服务器渲染
但很快它就会重新渲染页面并显示：
由浏览器渲染
我想我知道为什么会发生这种情况，但是可以肯定有人可以提供一个好的解释吗？另外，我可以以某种方式避免这种行为并强制浏览器渲染来自服务器的 html 吗？我应该担心这个吗？
客户端组件.ts
@Component({
selector: "client",
template: "<p>Rendered by {{ renderer }}</p>",
styleUrls: ["./dumco.component.css"]
})
export class ClientComponent implements OnInit {
renderer: string;
bla: any = [];
constructor(private http: HttpClient, @Inject(PLATFORM_ID) platformId: any) {
this.renderer = isPlatformBrowser(platformId) ? "Browser" : "Server";
}
}
应用程序路由.module.ts
import { NgModule } from "@angular/core";
import { RouterModule, PreloadAllModules } from "@angular/router";
import { AppComponent } from "./app.component";
import { CompfComponent } from "./compf/compf.component"
import …推荐指数
解决办法
查看次数
无法使用 AngularFire 将 Firebase 函数更新到 Angular Universal 应用程序中的节点 12
我按照本教程将 Angular Universal 部署到 firebase 函数并使用 Firebase 进行部署：https ://medium.com/@chris.duebbert/angular-9-universal-firebase-deploy-8d8d47244e1c
一切正常，直到我将 AngularFireModule 添加到我的 app.module.ts。然后，当我使用节点 12 运行“ng deploy”时，我在“ssr”函数的日志中收到以下错误：
提供的模块无法加载。您的代码中是否存在语法错误？详细的堆栈跟踪：ReferenceError: globalThis is not defined
当我尝试将本地节点版本设置为 10 时，我直接在终端中收到相同的错误。
显然，Firebase 使用 globalThis ，这需要节点版本 12（Angular 11 在 SSR @nguniversal/express-engine ReferenceError: globalThis is not defined 上运行）。我在 /functions/package.json 中添加了以下内容：
app.module.ts
"engines": {
"node": "12"
},
我可以为节点版本输入任意数字，并且我的 SSR 功能仍在使用节点 10 进行部署，并且“globalThis”错误仍在继续。我正在使用 Firebase 的 Blaze 计划。这是我的 app.module.ts：
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
AppRoutingModule,
NoopAnimationsModule,
FormsModule,
NgxTwitterTimelineModule,
AngularFireModule.initializeApp(config),
],
providers: [],
bootstrap: …推荐指数
解决办法
查看次数
Angular Universal 在渲染前不等待 api/http 请求
我有一个全新的 angular 通用项目，它似乎伪装了所有的 HTML（这很好）。但是，我正在尝试对我的 .NET 服务器进行 API 调用，该服务器是使用 weatherforecast API 构建的标准 API。
API 调用并且效果很好，但只有在我的 Web 应用程序从预渲染切换到 csr 后才会发生。参见示例 1。
示例 1
如果我在页面上禁用 javascript，这就是我得到的
这是 HTML 代码
<div style="padding: 5rem">
<h1>TEST</h1>
<h2>{{ this.SampleMessage }}</h2>
<div *ngFor="let product of weather$ | async">
<p>{{ this.product.summary }}</p>
</div>
</div>
app.component.ts
import { AppService } from './app.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title ….net prerender server-side-rendering angular-universal angular
推荐指数
解决办法
查看次数
标签 统计
angular ×9
angular5 ×2
firebase ×2
javascript ×2
.net ×1
amp-html ×1
angular-cli ×1
angular9 ×1
angularfire ×1
node.js ×1
prerender ×1