对于使用 jest 的 Angular v12 项目，我刚刚将 jest 更新到版本 28。但是现在，我收到以下错误 失败 src/app/components/update-input/update-input.directive.spec.ts ● 测试套件
Jest + TypeScript + Babel 未知选项：.0
我使用 Jest 为我的一些 Fauna DB 操作编写了一个集成测试。我尝试测试的源代码 (fauna.ts) 和测试本身 (fauna.test.ts) 都是 TypeScript 文件。我已经
我想模拟一个已被记忆的React组件。我正在使用 React 18.2 和 Jest 29.7 以及 Typescript，以防万一。我已经尝试了几种方法，但似乎找不到有效的方法......
我有一系列这样的测试用例： it('应该禁用渲染按钮', async () => { 使成为（...）; const 按钮 = screen.getByRole("按钮"); 期待（按钮）.toBeDi...
从 Angular 16 转换为 Angular 17 后缺少 SSR 支持
我已将我的项目从 Angular 16 升级到 Angular 17。但是，我目前没有收到服务器端渲染 (SSR) 的支持。从 Angular 16 迁移后，Angular 是否提供 SSR 支持...
我正在使用 Jest 为使用画布元素的组件编写测试。当我运行如下所示的测试时，我不断收到错误。 错误：未实现：HTMLCanvasElement.prototype.getCont...
如何在 React 中使用带有 className 属性的 TailwindCSS 实用程序类
我为 React 创建了一个模板（样板）存储库，它提供 ESLint、Typescript、TailwindCSS 和 Jest 测试，并使用 Webpack 构建。 然而，TailwindCSS 实用程序类不...
我正在使用 Jest 为 Node.js 后端开发一些测试，我需要检查来自第三方的一些值。在某些情况下，这些值可以是布尔值或空值。 现在...
可能我有一个配置问题，我只是不知道具体在哪里。错误消息是当我运行测试时： 类型错误：无法读取未定义的属性（读取“品牌”） 14 | 14 ...
Angular CLI 版本与 Angular Core 版本之间的兼容性？
有什么方法可以知道要安装哪个与我的 Angular Core 版本兼容的 Angular CLI 版本？他们完全独立吗？ 使用 Core v5.2.8 开发现有的 Angular 应用程序...
我有一个函数，可以将大写的字符串转换为大写前带有破折号的字符串，并使字符串小写。 格式化类型() { // 在大写字母前添加破折号...
我目前正在使用打字稿制作一个反应应用程序，并且我正在使用反应测试库进行测试。应用程序因 ReferenceError: jest is not Defined 崩溃。不过我所有的测试都通过了。 之前，
我尝试在 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
由于某种原因，自从从 Angular 13 升级到 Angular 15 后，当我输入： ng g c 某些组件 Angular 复制组件，创建重复文件。这种情况 100% 都会发生。第二次...
我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此，我通常创建这样的 Angular 服务： 导入 { 管理组件 }
如何在 React 组件的 Jest 测试中模拟 MUI5 Pro 许可证密钥
我目前正在将 MUI v5 Pro 组件集成到我的 React 库中，然后将这些库组件导入到我的主机应用程序中。我已经在两个 Libra 的 .env 文件中设置了 MUI 许可证密钥...
我的 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...
我正在使用以下文档学习放大器 https://docs.amplify.aws/angular/start/getting-started/installation/ https://docs.amplify.aws/angular/start/getting-started/setup/ 但同时
在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题
我有一个像这样的简单组件。 从'react'导入React，{useState}； 函数 MyComponentWithState(props) { const [值，setValue] = useState(0); 返回 （ 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此，为此我准备了 package.json 和 webpack.config.js，如下所示。 package.json： { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json： const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时，这些配置就像魅力一样，但我的观点是本地测试！ 我想在发布之前测试这个组件/库。为此，我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的，我的组件是功能性的，我也使用了钩子。因此，当我将本地链接的库注入到我的主 ReactJs 项目中时，会遇到此错误， 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次，我的组件也会导入 React！我的意思是在一个项目中两次 React 导入！. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题？我的错误在哪里？ 更新： 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的，但没有成功！意思是，我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js： import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json： { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改，npm link在我的ReactJS（Hooks）项目中真正发挥了作用。 请注意，这只是一个简单的 Rollup 配置来展示我的解决方案，您可以在配置中添加多种内容，例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分（而不是 react-native）内设置 peerDependencies 和 dependencies 包。另外，对于本地开发（当您的包未包含在任何其他 React 项目中并且您想在本地运行它时），您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能，当使用 npm link 时，请使用主应用程序项目和组件项目中的 react。 因此，在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案：https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言，我开发了一些 UI 组件作为包，其中有一个包含 React 应用程序的示例文件夹，用于创建 React 应用程序。 问题是，当我使用 npm i ../ 将包安装到示例应用程序中时，它会将包中的所有文件安装到示例应用程序中，包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项，示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。
登录后，使用 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 我有一个带有
类型“string”无法分配给类型“FormGroup<any>”Angular 14 错误
我是一名初学者 Angular 开发人员，我正在使用本教程构建一个 todoList 应用程序 -> https://www.youtube.com/watch?v=WTn2nVphSl8 它是使用 Angular 13 完成的。我遇到错误的是我...
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...
全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目（“ng new Default”），没有文件更改。 “ngserve”没有错误，但浏览器控制台显示： main.ts:5 错误
为什么我的应用程序根目录在 Angular 中不是 100% 高度？
这是我的第一个 Angular 项目，我对 Web 开发还很陌生。我正在使用 Angular 17.0.9。 我希望我的应用程序为 100%，但应用程序根标签始终是可能的最小高度 当你...
我创建了一个“自定义”主题（使用 https://material.angular.io/guide/theming 上的主题文档，这非常糟糕），如下所示： @import '~@angular/material/theming'; @包括 mat-cor...
Angular 17：fileReplacements 不替换文件
我有一个 C#/Angular 17 SPA 项目，在具有多个部署槽的 Azure 应用服务上的 Docker 容器中运行。基本上，生产槽加载标记为“latest-prod”的图像......
Angular 12：Firebase 模块未正确提供（？）
第一次使用Firebase，所以我不知道发生了什么。我没有修改使用 ng add @angular/fire 获得的配置，所以我的 AppModule 中的内容是： @NgModule({ 声明：[
如何将 swiper 11.0.5 元素与 Angular 17 一起使用
在 Angular 17 中，一切都是独立组件，并且没有 app.module.ts 文件。那么，我们把这段代码放在哪里， 从“swiper/element”导入{register}； 登记（）; 我正在...
我的 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 前端。 我想使用由我正在合作的团队创建的组件，该组件用于在表单中创建输入文本。 该组件的 .html...
当element在element上使用迭代变量时如何重构ngFor？
我有这个 {{ dt }} 我想重构为 Angular v17
我在 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 中的 JavaScript 函数“未定义”错误
我正在尝试让 Angular 17 项目正常运行。我正在使用 Bootstrap (5)，并尝试让 datePicker 工作。这需要一些 JavaScript 代码，但我无法使用这些代码。我已经关注了...
@types/ws 尝试从角度 12 更新到角度 13 时出现错误
我已将我的项目从 Angular 12 更新为 Angular 13，但遇到此错误： 错误：node_modules/@types/ws/index.d.ts:328:18 - 错误 TS2315：类型“服务器”不是通用的。 328服务器？：
如何在 Angular 17 中添加插值而不转义 URL 编码？
我想添加一个routeLink，其中使用Angular插值在字符串中定义完整的URL值，但是当页面执行时，它会转义URL。 预期：http://localhost:4200/books?page=3&sort=...
我正在开发一个使用 Angular 15 的 Excel 插件，在 Angular 应用程序中，我刚刚添加了 @ngrx/store。我也将开发工具添加到了模块中。我注意到 Excel 使用 Edge 来运行该加载项。
如何在 Angular Material 2 中构建自定义组件
是否有任何标准方法可以在 Angular Material 2 之上构建自己的组件或扩展现有组件。 之前我使用过 Sencha/ExtJS 框架，构建自己的框架非常简单
在一个项目中，我安装了 SSR 的 Angular Universal，并使用 Firebase 托管和功能进行部署。 对于静态文本和图像资源，我在生产中获取了用于 SEO 的内容，但是对于...
我正在 Angular 中用 karma 编写单元测试，但我正在努力解决奇怪的问题。我正在尝试测试 source-roll-history.dialog.ts 内部的 app-source-roll-history-form 的输出取消....
我正在使用 Angular 和 Material 创建一个 Web 应用程序，我希望能够拖放和调整我的部分的大小。有没有办法使用 Angular Material 拖放 CDK 来完成？
将 Angular Material 从 16 迁移到 17 时出现目录错误
我正在尝试运行 Angular Material 迁移工具以从 16 迁移到 17，但收到一条错误消息，指出目录必须是字符串。 JSON 显示它是错误的。这不是提示，a...
在 Angular 15 升级中遇到加载器解析 ag-grid/angular.css 文件的问题
我在将 Angular 14 升级到 15 时遇到此构建错误。 我尝试添加 css 加载器，但没有用 ./node_modules/@ag-grid-community/styles/ag-grid.css?ngGlobalStyle:1:0 - 错误：模块解析失败...