Angular Universal是Angular 2应用程序的服务器端渲染模块。
带有 SSG 的 Angular v17 SSR 不断重定向 301
当我转到我的网络应用程序并单击其中一个 routerLink 时，服务器会运行 .js 模块来显示内容。当我刷新该确切页面（预渲染的）时，我收到 301 错误。 网址/案例，...
如何在Azure应用服务（Web应用）中部署Angular Universal
我在没有服务器端渲染的情况下部署了 Angular 代码。已成功部署。 之后我将服务器端渲染集成到项目中。现在，当我尝试部署时，我发现...
Firebase 功能与 Angular Universal 页面加载时间较慢
我创建了一个 Angular 应用程序，并使用 Angular Universal 进行 SSR。在现代 Angular 部署之后，我使用 Firebase 托管和功能部署了应用程序，如本文所述 (https://medium....
Angular Universal 页面在 SSR 上加载两次
我的主代码（app.component.html）上没有任何更高级别的NgIf，这会导致重新加载。 我正在使用 Transferstate，因此在 SSR 设置公共 url 的答案后不会调用请求...
Angular Universal：标题和元标记，未在页面源中更新
在我的 Angular 通用应用程序中，我尝试在 api 调用成功后更新标题和元标记。 应用程序组件.ts 从 '@angular/core' 导入 {Component, Inject, OnInit, PLATFORM_ID}； 重要...
Angular 16 使用 @nguniversal/builders:prerender 作为 Prerender 的构建器，效果很好，升级到 Angular 17 ng 更新后将此构建器更改为 @angular-devkit/build-angular:prerender ...
如何使用 Angular ssr 从浏览器与express.js 服务器进行通信？
我遇到了一个 SSR 问题，不知何故，Angular 文档和新的 Angular 开发文档都没有提供有关它的信息，或者至少我没有找到任何信息。 我想知道如何从...传输数据
如何将 svg 从文件导入到 Angular 5 中的组件？
我发现所有将 svg 添加到 AngularCli 组件的教程都建议将其插入 html 模板中，如下所示： 我发现所有将 svg 添加到 AngularCli 中的组件的教程都建议将其插入到 html 模板中，如下所示： <div> <svg viewBox="0 0 250 250"> <svg:g class="group"> <svg:polygon class="shield" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" /> <svg:path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1 L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/> </svg:g> </svg> </div> 但我希望保持模板清晰，只在其中插入几个标签，并带有分隔的 svg 文件的 url，就像这样： <svg class="star"> <use xlink:href="../../../assets/images/svg/star.svg" x="0" y="0" /> </svg> 如何在组件中使用单独的 svg 文件？ 如果您有logo.svg： 将其放入您的src/assets文件夹 在 angular.json 配置中包含文件夹："assets": [ "src/assets" ] 参考模板：<img src="assets/svg/logo.svg"> 将您的 SVG 文件包含在 src/assets 文件夹中，并将 svg 文件夹添加到您的 angular.json 文件中。 "assets": [ "src/assets/svg/*" ] 这样您就可以根据需要将该文件包含在组件中。 TL;DR，使用 HttpClient 获取文件，然后使用 bypassSecurityTrustHtml 使用 [innerHTML] 渲染它。 这个答案可能有点晚了，但我们是这样找到解决方案的。我们尝试研究有角度的材料如何为他们的图标做到这一点，天哪，我们惊讶地发现它确实如此简单。他们只是使用 HttpClient 来获取文件！它已经在我们的脑海中，但我们一直忽略它，因为我们认为也许有更好的解决方案。 经过几分钟的搜索，我们偶然发现了这一点： https://github.com/angular/components/blob/653457eaf48faab99227f37bc2fe104d9f308787/src/material/icon/icon-registry.ts#L621 所以基本上，如果您的 SVG 文件位于资产文件夹 (/assets/images/svg/star.svg) 中的某个位置，您所要做的就是使用 HttpClient.get 获取它并使用 DomSanitizer 绕过安全性并信任给定值安全 HTML，然后才能将其渲染到组件。 最后，我们的组件如下所示： import { Component, OnChanges, SecurityContext } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-svg-icon', template: `<span [innerHTML]="svgIcon"></span>`, styleUrls: ['./svg-icon.component.scss'], }) export class SvgIconComponent implements OnChanges { @Input() public name?: string; public svgIcon: any; constructor( private httpClient: HttpClient, private sanitizer: DomSanitizer, ) { } public ngOnChanges(): void { if (!this.name) { this.svgIcon = ''; return; } this.httpClient .get(`assets/images/svg/${this.name}.svg`, { responseType: 'text' }) .subscribe(value => { this.svgIcon = this.sanitizer.bypassSecurityTrustHtml(value); }); } } 现在您可以将组件导入应用程序中的任何位置 <app-svg-icon name="star"></app-svg-icon> 执行此操作的一种方法是为 svg 文件设置 id 属性，并将 svg 文件放入 asset 文件夹中。然后在 mat-icon 中使用该 id，如下所示： <mat-icon svgIcon="my-star-icon"></mat-icon> 这是一个更好的方法；这样您就不必在 UI html 代码中处理 svg 标签。这也支持谷歌图标。 尽管如果您使用的是有角度的材料，这也是可行的。 编辑： 您需要在组件中的 IconRegistry 中注册图标才能正常工作： constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { iconRegistry.addSvgIcon( 'my-star-icon', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my-star-icon.svg')); } 查看文档此处和示例此处。 还有一种更优雅的方法，但这意味着 svg 文件具有与文件名相同的 ID。 Svg 组件： import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-svg-icon', template: ' <svg attr.width="{{width}}px" attr.height="{{height}}px" attr.fill="{{fill}}" attr.class="{{class}}"> <use attr.xlink:href="assets/icons/{{icon}}.svg#{{icon}}"></use> </svg> ', }) export class SvgIconComponent implements OnInit { @Input() icon!: string; @Input() width?: number; @Input() height?: number; @Input() size?: number = 24; @Input() fill?: string; @Input() class?: string; ngOnInit(): void { if (!this.width || !this.height) { this.width = this.size; this.height = this.size; } } } 假设您的文件夹中有 svg：/assets/icons/person.svg svg 本身包含以下代码（以便您可以轻松更改 svg 的大小和颜色，它不应包含高度、宽度和填充属性）： <svg id="person" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" /> </svg> 现在您可以在任何组件中使用您的图标： <app-svg-icon [icon]="'person'" fill="red" [size]="48"></app-svg-icon> 所以我试图做到这一点，在我的一生中，我无法让这个 svg 显示出来，直到......经过多次互联网搜索，我不认为这只是我，如果你复制意大利面路径互联网那么也许你忘了包含这个 xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"> <path d="I love copying and pasting paths"/> </svg> 然后你就可以继续做你的 <img src="assets/img/logo.svg" /> 如果这不起作用，并且您想使用图像，则将图像放入assets/img/copypasta.png 使用 SVG 作为模板 您可以直接使用 SVG 而不是 HTML 作为组件模板来完成 - 更多详细信息这里。 工作示例此处 @Component({ selector: 'app-my-svg', templateUrl: './my-svg.component.svg', styleUrls: ['./my-svg.component.css'] }) export class MySvgComponent { ... 在此 SVG 模板（位于单独的文件中！）中，您可以以角度方式使用样式和变量 Angular - 创建另一个组件，添加很多东西等，然后获取你的 svg。 React - 只需导入您的 svg 即可继续工作。 （是的，它将被添加为标签。您可以用 css 填充它，随意更改它） 2024 版本。在我以编程方式设置innerHtml 之前，该图标不可见。还要注意身份验证拦截器，向 get 请求添加标头可能会导致其失败并出现空错误。 import { HttpClient } from '@angular/common/http'; import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, OnChanges, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { Router } from '@angular/router'; @Component({ selector: 'app-icon', template: `<span #svgContainer></span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) export class IconComponent implements OnChanges { @Input() src?: string; svgIcon?: any; @ViewChild('svgContainer', { static: true }) svgContainerRef!: ElementRef; @HostBinding('style.display') display = 'inline-flex'; constructor(private http: HttpClient, private sanitizer: DomSanitizer, private router: Router) { } ngOnChanges() { if (!this.src) return; this.http.get(this.src, { responseType: 'text' }).subscribe((data) => { const div = this.svgContainerRef.nativeElement; if (div) { div.innerHTML = data; } }); } }
Angular SSR 抱怨我的 Express API 代码中存在非 ESM 模块
我设置了一个 Angular SSR 项目来运行我的 Express API 作为 SSR 服务的一部分。我所有的应用程序代码都位于 /src/app 中，所有 API 代码都位于 /src/api 中。我的 API 代码有一些导入...
Angular Universal 17 - 部署 URL 的替代方案
在 Angular 17 中，随着 Universal 和 SSR 的使用，deployUrl 被删除。该变量允许您在非根 uri 下提供 css、js 和资产文件夹。例如 /my/super/awesome/app. ...
Angular 17 通用（SSR）+独立组件+WebComponents（Angular 元素）
是否可以使用独立组件创建一个 Angular 17 通用项目，同时还具有 Web 组件（Angular 元素）？ 我正在尝试从 Angular 16 导入一个组件（常规组件）
有没有办法告诉 Firestore 获取并等待，以便 Angular SSR 将在服务器而不是客户端中呈现响应数据？
我的目标是从 Firestore 获取数据并在服务器中呈现响应数据。 问题是，Firestore 以某种方式设法告诉组件不要等待，只需将 HTML 发送到客户端...
APP_INITIALIZER 在 Angular 17 中存在 SSR 问题
伙计们。当我尝试迁移到 Angular 17 中的 SSR 时遇到问题。我的应用程序在 Angular 16 中仅是客户端。 我有一个名为 CiyuanEnvironmentService 的服务和另一个名为 LiveService 的服务....
Angular 通用 SSR + JSDOM + Webpack：无法解析“画布”
我正在尝试使用 jsdom 为我的 SSR Angular 项目创建窗口和文档对象。但是，我遇到了这个错误。我正在使用该窗口尝试初始化 jQuery 库（到
Angular 9 SSR 构建服务错误 -- 错误 ReferenceError：文档未定义
错误参考错误：文档未定义 从 'fs' 导入 { readFileSync }； const 多米诺骨牌 = require('多米诺骨牌'); // 导入库 `domino` const DIST_FOLDER = join(process.cwd(), 'dist/
Angular 16/通用 ssr 错误“TypeError：this.delegate.createRenderer 不是函数”
将我的 Angular 通用应用程序升级到版本 16 后，ssr 开发服务器不再工作。具体来说，它编译成功，但是当我尝试访问服务器启动的端口时，它
我正在尝试将基本的角度通用应用程序部署到 /sub/ 文件夹。页面加载只是在该路径中找到，但角度应用程序 js 文件却没有。 我已经使用...
我按照官方的 Angular-CLI 教程将 Angular-Universal 集成到我现有的 Angular-CLI 应用程序中。 我能够为我的 angular-cli 应用程序执行 SSR。但是当我尝试集成 ngx-leaflet 时，我很...
将 firebaseui 与 Angular Universal 结合使用 - ReferenceError：窗口未定义
我有一个 Angular 16 应用程序，使用 Angular Fire、firebaseui，并且我最近安装了 Angular Universal。 每当我运行 npm run dev:ssr 来启用 SSR 时，我都会收到此错误 - ./node_modules/dialog-
随着 Angular 17 预渲染可用，我无法从 Angular 文档中确定如何使用外部 API 中的动态内容来驱动预渲染路由。 路线： 前...