angular-ssr 相关问题


从 Angular 16 转换为 Angular 17 后缺少 SSR 支持

我已将我的项目从 Angular 16 升级到 Angular 17。但是,我目前没有收到服务器端渲染 (SSR) 的支持。从 Angular 16 迁移后,Angular 是否提供 SSR 支持...


Angular 10 ssr 不适用于请求 API

在一个项目中,我安装了 SSR 的 Angular Universal,并使用 Firebase 托管和功能进行部署。 对于静态文本和图像资源,我在生产中获取了用于 SEO 的内容,但是对于...


NextRender() 之后角度信号未更新

使用 Angular SSR 时,如果我使用 afterNextRender,我必须手动触发更改检测。 这毕竟是一个有角度的 API。 有人有解决方案吗? afterNextRender(() =&...


Angular 17 - SSR 独立 - 具有异步的路由 FactoryProvider - NG04014

简介 您好,我正在尝试配置我的角度路由器并根据我们是否经过身份验证向其传递不同的路由。 这是我执行此操作的代码: 应用程序.routes.ts 导出常量


世博会React Native SSR

我有一个基于 Expo 和 React-native-web 构建的项目,适用于 Android、IOS 和 Web。 我使用 Expo 路由器进行导航,使用 @shopify/restyle 进行样式设置。 我想为此实施 SEO 或 SSR ...


如何解决 Firebase Cloud Function 未在 SSR 的“/workspace/.next”中找到 Next.js 生产版本?

我之前问过这个问题,并且仍在为这个问题苦苦挣扎;谁能帮我解决这个问题: SSR Next.js 应用程序的 Firebase Cloud Function 未在...中找到生产版本


如何在 blazor SSR .net 8 中上传文件?

您好,我创建了一个具有模型和增强属性的 EditForm,当通过 OnValidSubmit="Submit" 提交到服务器时,断点在 Visual Studio 中工作,但 ViewModel 的 IFormFile 字段是...


如何让Next.js对SEO友好,同时支持PWA离线模式?

我们有一个 Next.js 应用程序,支持用于 SEO 的 SSR。 这意味着当您访问任何页面时,只会下载该特定页面所需的基本代码,从而导致...


Angular CLI 版本与 Angular Core 版本之间的兼容性?

有什么方法可以知道要安装哪个与我的 Angular Core 版本兼容的 Angular CLI 版本?他们完全独立吗? 使用 Core v5.2.8 开发现有的 Angular 应用程序...


Next.js 在生产中禁用服务器功能的缓存

在 next.js 14 中,我有一个页面使用默认的服务器端渲染 (SSR) 来获取一些数据并将其传递到其客户端组件。 导出默认异步函数 Page() { 常量杂志=等待


安装 Angular CLI 时出现 Npm Angular 警告

当我尝试通过以下方式安装 CLI 时收到 npm 警告: npm install -g @angular/cli: C:\Users\myuser>npm install -g @angular/[email protected] npm 警告已弃用 [email protected]:此模块...


Angular 17 中的 NG 块 UI

我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗? 提前致谢 我使用 npm i ng-


Angular Material v17:缺少“MatFormFieldAppearance”中的“遗产”

在 Angular Material v14 中,MatFormFieldAppearance 提供了传统、标准、填充和轮廓值。 类型 MatFormFieldAppearance = '旧版' | '标准' | '填充' | '大纲'; 然而,在 Angular


如何在下一个js应用程序路由器中实现mui风格的组件而不使用“使用客户端”

我想在nextjs 14中使用mui风格的组件,但在每个页面上我必须写“使用客户端”,我想使用nextjs ssr功能但它强迫我进行csr,如何实现它?请


Angular“ng 生成组件”复制组件

由于某种原因,自从从 Angular 13 升级到 Angular 15 后,当我输入: ng g c 某些组件 Angular 复制组件,创建重复文件。这种情况 100% 都会发生。第二次...


如何使用 Angular 服务创建 nx 库

我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此,我通常创建这样的 Angular 服务: 导入 { 管理组件 }


angular-2-dropdown-multiselect - 自定义宽度 100%

我正在实现这个 angular-2-dropdown-multiselect 组件: https://www.npmjs.com/package/angular-2-dropdown-multiselect 该组件工作正常,但我需要将其设置为适合续...


Angular-NG8001 未知元素错误。怎么解决?

我的 Angular 项目有问题。我有一个项目结构:应用程序结构。在我的 app.module.ts 中,代码如下: 从'@angular/core'导入{NgModule}; 从'@


Angular 项目不适用于@babylonjs/viewer

我在全球安装了@Angular/[email protected]。我使用命令行“ng new BabylonTest --routing false --style css --skip-git --skip-tests”创建了一个 Angular 项目。 CD 到文件夹“Babyl...


使用模块联盟进行 Angular 升级 - “集合没有原理图。”

我正在将一组 Angular 应用程序从 v12 升级到 v16,它们使用模块联合和 Angular Architects 的模块联合插件。 成功升级每个应用程序的 Angular 版本后...


Node Sass 版本 9.0.0 与 ^4.0.0 不兼容

我的应用程序中没有安装node-sass或sass包。但我一直收到这个错误 ./src/scss/styles.scss 中的错误(./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plu...


放大init UnauthorizedException

我正在使用以下文档学习放大器 https://docs.amplify.aws/angular/start/getting-started/installation/ https://docs.amplify.aws/angular/start/getting-started/setup/ 但同时


登录后,使用 angular-oauth2-oidc 时,hasValidAccessToken 始终为 true

我已经使用 Angular 12.2 实现了 angular-oauth-oidc (版本 12.1.0)。我使用 Keycloak 作为 SSO 登录没有问题,但我在库中遇到了奇怪的行为。 每次,之后...


通过Angular到Springboot访问POST失败但GET成功,Postman适用于GET和POST

我正在使用示例 Angular 应用程序来测试 Okta 与 springboot 应用程序的集成。 前端示例:https://github.com/okta-samples/okta-angular-sample 我有一个带有


面临 Angular 17 和 Firebase 的问题

当我尝试在 Angular 17 应用程序中添加软件包时,它无法安装该软件包。它总是显示下面给出的错误。 ng 添加@angular/fire 跳过安装:软件包已安装 更新


类型“string”无法分配给类型“FormGroup<any>”Angular 14 错误

我是一名初学者 Angular 开发人员,我正在使用本教程构建一个 todoList 应用程序 -> https://www.youtube.com/watch?v=WTn2nVphSl8 它是使用 Angular 13 完成的。我遇到错误的是我...


如何使最新的 Angular 版本与旧浏览器兼容?

Angular 在其文档中声明,它与所有主要浏览器的 2 个最新版本(以及 Firefox 的最新+ESR)兼容。由于 Angular 在底层使用标准 DOM API,因此它应该...


为什么 Angular 2 或 Angular 4 使用香蕉括号?有什么具体原因吗?为什么它们不遵循与 Angular 1 相同的模式?

我知道,它与任何编码无关,但它们可以遵循与 AngularJS 中相同的语法 有角度...


Angular Material 17 独立组件中没有 DateAdapter 的提供者

我有一个带有 Angular 17 应用程序的 nx 项目,并尝试使用带有材料 17.0.4 的 Angular 材料日期选择器。但我明白了 NullInjectorError:没有 DateAdapter 的提供者! 错误。组件...


应用程序无法识别手势,例如在 Angular 11 中使用 Hammer.JS 进行平移

我无法在使用 Hammer.JS 的 Angular 应用程序中识别任何手势,例如滑动、平移。它的设置是这样的: 包.json: “@角度/核心”:“11.0.5”, “@Angular/platform-br...


表格标题背景颜色动态变化 - Angular 材质

我按照这个例子来实现角度材料表。 https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts 在这里,我使用...


如何将子组件与父组件一起使用 - Angular

我创建了这个名为country-flag-dropdown.ts和html的组件 成分: 从“@angular/core”导入{Component、OnInit、Input、Output、EventEmitter}; 导入 {FormGroup, FormControl} ...


如何在 Angular 17 中为传单图像配置加载器?

我是最近的 Angular 用户,我有一个 Angular 17 项目,带有传单地图。 当我尝试构建该项目时,传单地图的 3 个图像(标记图标和图层)出现 3 个错误: 是否...


如何让新的 Angular 17 项目运行?

全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目(“ng new Default”),没有文件更改。 “ngserve”没有错误,但浏览器控制台显示: main.ts:5 错误


为什么我的应用程序根目录在 Angular 中不是 100% 高度?

这是我的第一个 Angular 项目,我对 Web 开发还很陌生。我正在使用 Angular 17.0.9。 我希望我的应用程序为 100%,但应用程序根标签始终是可能的最小高度 当你...


如何配置 Angular 17 开发服务器将 HTTP 重定向到 HTTPS?

我已将 Angular 开发服务器配置为成功使用带有 SSL 的 HTTPS: “端口”:4200, “ssl”:正确, "sslKey": "./tools/.ssl/localhost+2-key.pem", “SSL...


我已将 Angular 版本 8、9、10 升级到 16。收到此错误 NG8001:“mat-icon”不是已知元素

我已将 Angular 版本 8、9、10 升级到 16。在 Angular 16 版本上面临以下问题。我已经导入了模块文件中的所有材质模块。然后它也会给出错误。


Angular Material 5 深色主题未应用于机身

我创建了一个“自定义”主题(使用 https://material.angular.io/guide/theming 上的主题文档,这非常糟糕),如下所示: @import '~@angular/material/theming'; @包括 mat-cor...


Angular 17:fileReplacements 不替换文件

我有一个 C#/Angular 17 SPA 项目,在具有多个部署槽的 Azure 应用服务上的 Docker 容器中运行。基本上,生产槽加载标记为“latest-prod”的图像......


如何将数据从一个组件共享到另一个组件

我有两个组件:主页组件和产品列表组件。 这是我的 home.component.ts: 从 '@angular/core' 导入 { Component } ; 从“@angular/core”导入{NgModule}; 导入{产品...


Angular 12:Firebase 模块未正确提供(?)

第一次使用Firebase,所以我不知道发生了什么。我没有修改使用 ng add @angular/fire 获得的配置,所以我的 AppModule 中的内容是: @NgModule({ 声明:[


在 Angular 应用程序中调整画布元素大小时如何解决闪烁问题

我有一个带有画布的 Angular 组件,如下所示: 在 .ts 文件中,我设置了一个变量来访问...


如何将 swiper 11.0.5 元素与 Angular 17 一起使用

在 Angular 17 中,一切都是独立组件,并且没有 app.module.ts 文件。那么,我们把这段代码放在哪里, 从“swiper/element”导入{register}; 登记(); 我正在...


NG8001:“app-welcome”不是已知元素:

我的 Angular 应用程序遇到问题,收到错误 8001。我不知道如何处理它。谁能帮我这个?谢谢你! 应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题,收到错误 8001。我不知道如何处理它。谁能帮我这个?谢谢! app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置,但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗? app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。


在 Angular 的输入标签中使用值

我目前正在开发 Angular 前端。 我想使用由我正在合作的团队创建的组件,该组件用于在表单中创建输入文本。 该组件的 .html...


当element在element上使用迭代变量时如何重构ngFor?

我有这个 {{ dt }} 我想重构为 Angular v17


Angular 复选框:更改未正确反映

我在 Angular 项目中面临一个问题,其中选项表单中有多个复选框。问题是有时复选框中的更改无法正确反映。这是相关内容...


Angular:如何将管道与位置结合使用

在 Angular 中,位置是“应用程序可以用来与浏览器 URL 交互的服务”。 它提供了一个 getState() 方法,该方法提供“位置历史记录的当前状态&


选中/取消选中 mat-checkbox 未正确返回 true 或 false

我正在使用 Angular 15 和 Angular Material 14,下面是我用来显示复选框列表的 HTML 代码 我正在 Angular 15 和 Angular Material 14 工作,下面是我用来显示复选框列表的 HTML 代码 <div *ngFor="let control of checkboxArray.controls;let i = index" > <mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> 下面是Angular中onCheckedChange函数的代码 onCheckedChange(index: number) { this.sortCheckboxArray(); const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value) { this.lists.push(checkboxItem.id.toString()); } else { this.lists.pop(checkboxItem.id.toString()); } } this.updateSubscriberGroupsCount(); this.cdr.detectChanges(); } 当我选中复选框时,在这个 onCheckedChange 函数中,control.value 始终返回 false。哪里出了问题?无法理解.. 这是一个工作版本,复选框逻辑工作正常,希望有帮助! 我们需要使用control.value获取表单组,但我们还需要访问内部表单控件,然后获取复选框值! import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormArray, FormControl, FormGroup, ReactiveFormsModule, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { MatCheckboxModule } from '@angular/material/checkbox'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule], template: ` <form [formGroup]="form"> <div formArrayName="array"> <div *ngFor="let control of checkboxArray.controls;let i = index" [formGroupName]="i"> <mat-checkbox formControlName="test" style="margin-bottom: 15px;" (change)="onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> </div> </form> `, }) export class App { name = 'Angular'; form = new FormGroup({ array: new FormArray([]), }); lists = []; checkboxItems: any = []; ngOnInit() { this.add(); this.add(); this.add(); } add() { this.checkboxArray.push( new FormGroup({ test: new FormControl(false), }) ); this.checkboxItems.push({ name: 'test' }); } get checkboxArray() { return this.form.get('array') as FormArray; } onCheckedChange(index: number) { // this.sortCheckboxArray(); // const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value.test) { console.log('checked'); // this.lists.push(checkboxItem.id.toString()); } else { console.log('not checked'); // this.lists.pop(checkboxItem.id.toString()); } } // this.updateSubscriberGroupsCount(); // this.cdr.detectChanges(); } } bootstrapApplication(App); 堆栈闪电战


在 Angular 中更新信号的嵌套属性时如何中断对象引用?

我有一个 Customer 对象,包装在 Angular 的信号中,如下所示: mCustomer: Signal = signal(new Customer(id: 1, ...)); 该信号是通过使用 ngRx Sig 的服务提供的...


© www.soinside.com 2019 - 2024. All rights reserved.