问题标签 [angular12]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
5324 浏览

angular - 如何修复 npm 审计漏洞 Angular 12.0.3

在我创建一个新的 Angular 12.0.3 项目后,npm audit立即检测到 8 个高漏洞和 40 个中等漏洞。

当试图解决npm audit fix没有任何变化的问题时。 npm audit fix --force将漏洞减少到 9 个中等漏洞和 7 个高漏洞,但是当我尝试运行项目时,由于版本不匹配,会显示以下错误:

我已经尝试按照此答案中描述的解决方案修复漏洞,但这破坏了项目。

此外,我使用 angular-cli 的 v11-lts 创建了一个项目,但是由于不同的漏洞导致了相同的问题:

有没有办法修复所有漏洞?


在通过更新 @angular-devkit/build-angular 包后,就像他的回答npm install @angular-devkit/build-angular@latest中描述的 imam hulagur 一样,漏洞减少到 2 个(1 个中等,1 个高)。之后我尝试运行并遵循输出帮助修复了另一个漏洞npm audit

所以现在只剩下一个漏洞:

包的路径和版本:

0 投票
1 回答
94 浏览

ionic-framework - Ionic Angular Mobile App 在从项目中的文件中获取和显示 json-array 数据时显示错误---

这是一个带 Angular 的 Ionic 移动应用程序。相关问题,使用 Ionic Framework 和 Angular TS 作为后端。我对离子应用程序开发完全陌生。

我创建了这个 stackblitz 来模拟我的需要 ---> https://stackblitz.com/edit/ionic-6h9vwa

目标是在类别标签页上绑定和显示来自 cat_data.json 文件[将在 assets/data/ 文件夹中找到] 的类别数据。我当前遇到的错误,您可以在控制台中看到 -> ERROR Error: this.catData.loadCategories is not a function

这行代码在 category-list.html 页面的后端 .ts 文件中。像这样:

大多数与问题相关的代码我都尽力安排。我无法获取和显示数据,即使在尝试了多个 no 之后。烫发。和梳子。我需要让这个工作。至少以某种形式显示它,最好在离子网格和离子行,离子列排列中。希望你能理解。如果这样做了,我至少可以在正确的实现中使用它。

我想你可以分叉它并工作/修改它或编辑原始闪电战本身。随意。

想要这个工作。

0 投票
1 回答
104 浏览

javascript - 隐式具有 `any` 类型,因为索引表达式不是 'number'.ts(7015) 类型

我在 Angular 12 版中使用 Zxing Scanner 组件。我在很多地方都遇到了这个错误。

错误在这一行[format.trim().toUpperCase()],当我悬停时它会显示Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)

这是我截屏的错误代码...请查看

为什么会出现这个错误??我该如何解决?

我需要一个完美的解决方案,而无需更改angular.jsonpackage.json中的任何配置

0 投票
1 回答
27 浏览

angular - 在Angular 12中更改选定收音机的标签背景

在以下示例中检测选择了哪个无线电的最佳方法是什么?

我希望能够使用 ngClass 为所选标签添加背景。我还可以将该变量用于其他事情(例如在示例中禁用“SomeComponent”或“AnotherComponent”。

0 投票
1 回答
45 浏览

angular - 将数组转换为接口数组

在 Angular 12 应用程序上,我有以下环境:

我创建了一个Application接口和EnvironmentService类:

但我收到一个错误:

我怎样才能转换environment.applicationsApplication[]

0 投票
0 回答
218 浏览

angular - 角度 12 顶点烛台折线图工具提示错误

你好朋友今天我刚刚安装了新的 angular 12 项目并安装了顶点图表模块,当我尝试从演示集成顶点烛台线时,它在工具提示中显示错误,我的 ts 文件代码如下

但是在服务命令之后,如果我从工具提示功能中删除任何,它总是显示错误

比以下错误显示

在此处输入图像描述

但如果我添加任何

函数({ seriesIndex:任意,dataPointIndex:任意,w:任意}){

比这个错误显示

在此处输入图像描述

请告诉我我应该怎么做才能让它工作我已经从下面的例子中复制了这个图

https://apexcharts.com/angular-chart-demos/candlestick-charts/candlestick-with-line/

谢谢

0 投票
1 回答
124 浏览

spring - 加载资源失败:服务器响应状态为 404 (Not Found) Angular12 Spring boot

我是 Sping Boot、rest api 和 angular12 的新手,

我在 vscode 中运行我的程序来调用返回的 api,我收到错误“加载资源失败:服务器响应状态为 404(未找到)”

我的代码:后端控制器:


我的前端 angular12 服务


我的打字稿文件


谢谢!

0 投票
0 回答
491 浏览

node.js - 差异加载在 Angular 12 中不起作用:“Uncaught SyntaxError: Unexpected token ':'”

我最近在我们的 Angular 12 项目中遇到了包大小超出预算限制的错误。在实施多种方法来减小包大小时,差异加载就是其中一种方法。Angular 将其作为默认设置提供,并在您在您的和您的配置中设置target为后为您启用此功能。es2015tsconfig.app.json.browserslistrc

但令我惊讶的是,即使在执行了上述两个步骤之后,某些东西也无法正常工作。我们正在@angular-builders/custom-webpack用作我们的构建器。在我们的自定义 webpack 配置中,我们只是DefinePlugin用来添加一些特定于环境的变量。

我的angular.json

我的tsconfig.app.json

tsconfig.json

我的.browserslistrc

根据文档,您可以通过查看index.html文件的<script>标签来验证差异加载是否有效:

index.html<script>标签如下所示:

我似乎无法在其中找到任何一个es5es2015关键字。我都找不到type=modulenomodule。我的包大小肯定减少了,但我的项目在服务或部署后都无法运行。我在浏览器 ( Chrome 91.0.4472.101) 的控制台中收到以下错误,不清楚:

在此处输入图像描述

我的polyfill.ts

我遇到了这个问题,它指出在发球期间不会发生差异加载,但对我来说它在部署后也不起作用。为了避免任何配置错误,我还在 Angular 12 中创建了一个新的演示项目,并且一切正常。我也匹配了上述文件的值。我发现的唯一区别是:

  • 演示项目中没有使用自定义 webpack
  • polyfill.ts仅包含 Zone.js 的导入

甚至演示项目的index.html也不包含es5, es2015, module,nomodule关键字,并且与我的项目的index.html.

我在这方面花了很多时间,但找不到任何解决方案。如果我遗漏了什么,请告诉我。

0 投票
0 回答
16 浏览

routes - 使用不同的用户数据在超链接单击时重新加载角度页面

我有两个组件:

  1. Home 组件 2) Detail 组件

    在 Home 组件 HTML 中,我有两个输入字段:

    1. 报价 2) 报价版本
  2. 填写两个字段值,比如说 offerId100 和 version1 并提交表单。

  3. 在同一个 Home 组件 TS 文件中,我正在调用后端 http 调用并更新 SharedService 中的数据,并路由到 Detail 组件。

  4. 在 Detail 组件 ts 中,我从共享服务订阅数据并渲染到它的 HTML。

现在这个细节组件 html 有一个超链接,它调用 TS 方法,传递两个相同的参数,不同的值 offerId101 和 version2。在这种方法中,我正在调用后端服务并获取数据。现在我想在相同的 html 中呈现这些数据。
我将如何做到这一点?

我的代码是:

DetailComponent.ts:

正在发生的事情是:
它正在导航到 HomeComponent html,而不是使用新数据 (productList) 重新加载相同的 html。无论我是否将它路由到同一个组件,它都会转到 HomeComponent Screen。

我希望我的细节足以理解这个场景。请帮忙。

0 投票
0 回答
18 浏览

spring-boot - Springboot 中的 Angular 路由 URL 处理

我有一个用 Spring boot 2.4V 开发的 springboot 应用程序。前端是 Angular JS 和 Angular 12.0 的混合。我们正在将 UI 从 Angular JS 迁移到 Angular 12.0。该应用程序已通过 keycloak 身份验证,包括 Angular 和 Spring Boot。

我们正在尝试 Angular JS 和 Angular 12.0 的共存。为此,将 Angular 12.0 代码添加到文件夹 /webapps/ROOT/beta/ 中

在尝试使用 URL http://localhost:9090/beta/index.html 访问应用程序时,Angular 12.0 添加了一个路由参数,因此浏览器上的目标 URL 是

http://localhost:9090/beta/index.html/home。

如果我在浏览器上进行刷新,结果响应是 404 page not found 错误。我可以通过在springboot中添加一个控制器来处理这个问题,如下所示

但是这个修复的问题是,即使我在设计菜单上,URL 也是 http://localhost:9090/beta/index.html/design 并且在页面刷新时用户被重定向到主页 URL http://本地主机:9090/beta/index.html/home。

有人可以建议一个选项来处理这个吗?

我还尝试在 tomcat 9.0 服务器中添加重写规则,因为我们将应用程序部署为 WAR 文件 [WAR 中的 UI 和 Java 代码]。此修复对我们也不起作用。