首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在运行ng build --output-hashing=all --prod时,类型'AbstractControl‘上不存在属性'controls’

这个错误是由于在Angular应用中使用了'AbstractControl'类型的对象,但该对象上不存在'controls'属性。'AbstractControl'是Angular中表单控件的抽象基类,它用于处理表单的验证和状态管理。

解决这个问题的方法是确保在使用'AbstractControl'对象之前,先检查该对象是否具有'controls'属性。可以使用'instanceof'运算符来检查对象的类型,然后再访问'controls'属性。

以下是一个示例代码:

代码语言:txt
复制
import { AbstractControl } from '@angular/forms';

// 假设有一个名为'form'的表单控件
if (form instanceof AbstractControl) {
  if (form.controls) {
    // 在这里使用'controls'属性
    // 例如:form.controls['fieldName'].value
  } else {
    // 处理'controls'属性不存在的情况
  }
} else {
  // 处理'form'不是'AbstractControl'类型的情况
}

需要注意的是,'AbstractControl'是一个抽象类,不能直接实例化。它有两个主要的子类:'FormControl'和'FormGroup',分别用于表示单个表单控件和表单控件组。在实际应用中,我们通常会使用这两个子类来创建和管理表单。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular CLI 简介

就拿当前这个项目来说, 它的默认样式文件类型是scss: 如果我该项目目录执行: ng set defaults.styleExt css 那么该项目的设置就会改变: 如果使用参数 -g(--global...否 是(和AOT以及Angular5) --named-chunks 是 否 --output-hashing media 所有 下面命令都是针对开发build, 它们的作用是一样的: ng build...build --prod ng build --prod -e=prod ng build --target=production --environment=prod 其它常用的参数还有: --sourcemap...在内存中serve 生产模式build的文件 试试 --prod: ng serve --prod 通过文件大小可以看出确实是prod build的. ng eject....如果我想debug e2e, 那么执行这个命令: ng e2e -ee 由于我使用的是mac, 当前这个命令mac貌似确实有一个bug: 如果可以正常运行这个命令的话, 终端窗口会出现“Debugger

6.1K110
  • 使用 Angular Transfer State 的一个具体例子

    当您单击城市名称,该应用程序会显示该城市的当前天气。 因为我们希望我们的应用程序是可抓取和可索引的,所以我们使它通用:城市页面服务器呈现,存储为 HTML 文件并由 HTTP 服务器提供服务。...$ git checkout initial 复制代码 构建程序: $ npm install $ ng build -prod $ ng build -prod -app server --output-hashing...复制代码 现在,在为组件提供数据的解析器中,我们可以使用 TransferState API: 服务器,我们首先注册 onSerialize 以提供我们将下载的数据,然后我们从我们的数据提供者那里获取数据...浏览器,我们使用get方法来获取server提供的数据,我们直接提供这些数据。 我们还从传输状态中删除了提供的数据,因此页面的重新加载将不再使用提供的数据。...我们可以通过调用 hasKey 方法来检测我们是服务器还是浏览器应用程序。 此方法仅在浏览器中返回 true。

    68000

    Angular17 使用 ngx-formly 动态表单

    ; 使用 Formly 内置验证: 新用户注册表单的基础增加输入年龄字段的配置,再为每个字段配置的 props 增加 required 属性,表示这是一个必填的字段,就像新用户注册表单中用户名字段一样...label}最大是: ${error.max}岁`; }, } ], }), 指定字段注册自定义验证消息,使用正则验证字段需要在字段定义通过 validation 属性设置:...隐藏/显示字段: 如果需要使前面加入的确认密码字段输入密码字段后才显示就需要使用 expressions.hide 来控制隐藏或显示: { key: 'checkPassword', type...this.signInOptions.formState.showValidation; } 监听状态变化: 通过 hooks.onInit 注册 fieldChanges,可以在运行时获取表达式改变派发的事件...定义类型为 FormlyExtension 的对象, prePopulate 进行 label 字段匹配: import { FormlyExtension } from '@ngx-formly/

    65010

    玩转 Angular 环境变量

    通过上面的注释,我们知道执行 ng build ---prod 命令,进行项目构建的时候,会执行文件替换操作。...,我们通过以下命令进行项目构建: $ ng build --prod 那么有的同学,可能想到对于构建测试环境的包,是不是只要运行: $ ng build --test 想象中很完美,但实际并不是这样,...ng build 命令并不支持 --test 参数,感兴趣的同学可以运行 ng build --help 命令查看 ng build 命令所支持的参数: usage: ng build <project...: $ ng build --configuration=test 上述命令成功运行之后,就会在根目录下生成 dist 目录,并且该目录下也会创建一个 PROJECT-NAME 目录。...}, 之后,我们就可以命令行运行以下的命令,来启用测试环境: $ ng serve --configuration=test 总结 本文简单介绍了 Angular 项目中,environment.ts

    3.3K20

    Angular10配置webpack打包 「详细教程」

    当工作空间文件结构到位,可以命令行中使用 ng generate 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的默认应用(除非你创建其它应用之后更改了默认值)。...serve和ng build。...如果是字符串,那它的值可能为 initial | async | all 三者之一。默认值的数据类型为 字符串,默认值为 async,但推荐用 all。它表示将哪种类型的模块分离成新文件。...字符串参数值的作用分别如下: initial:表示对异步引入的模块不处理 async:表示只处理异步模块 all:无论同步还是异步,都会处理 minSize: 该属性值的数据类型为数字。...2.分离第三方库 要将第三方库分离出来,我们需要调整配置文件,设置 chunks: 'all',即表示让所有加载类型的模块某些条件下都能打包。

    5K20

    使用 Github Actions 自动部署 Angular 应用到 Github Pages

    前言 最近在学习 Angular,一些基础的语法也学习的差不多了,就在 github 新建了一个代码仓库,准备用 ng-zorro 搭个后台应用的模板,方便自己以后写些小东西可以直接使用。...以后当我们需要更新网站,再使用上面的命令即可发布到 github page ?...因为每次执行 ng deploy 命令都需要在命令中添加 base-href 参数,所以这里我们可以 package.json 文件中添加一个 script,这样当后面我们需要发布,直接执行自定义的...github 的 master 分支提交代码以及提交 PR 进行触发 jobs:需要触发的任务信息,一个 workflow 可以包含多个的 job,这里只有一个名为 build 的 job # This...一个 workflow 文件中最重要的就是包含的 jobs,它表明了当前 workflow 所能实现的功能,一个 job 任务主要包含了如下的属性 runs-on:当前 job 需要运行在的系统环境 steps

    1.4K10

    Angular 工具篇之分析包的大小

    : $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目,构建的时候,需要添加相关参数,具体如下: $ ng build... angular6-example-app 项目中,也为我们提供了相应的 npm script,具体如下: "bundle-report": "ng build --prod --stats-json...首先我们先来在当前项目中安装 source-map-explorer: $ npm i source-map-explorer --save-dev 然后重新进行项目构建: $ ng build --...prod --source-map 构建完成后,根目录下的 dist 文件夹下会生成 main bundle 文件,这时我们可以命令行执行下列命令来查看结果: $ node_modules/.bin...为了方便操作,我们也可以定义一个 npm script 任务来处理上述的工作: "map-explorer": "ng build --prod --source-map && source-map-explorer

    2.4K40

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    Angular CLI运行webpack dev服务器,该服务器将我们的应用呈现在下一个空闲端口上(以便您可以同一台机器运行多个应用),并进行实时重新加载。...您可以通过编辑prefix属性将其更改为首选项的前缀.angular-cli.json,因此ng generate首次使用前最好先这样做。 所以,我们有一个组件的构造ngOnInit函数和一个函数。...只是为了让您对这些环境文件在这里有所了解,它们实际包含在编译阶段的项目中,并且.prod.该部分由--environment交换机为ng serveor 定义ng build。...准备生产 因此,让我们构建我们的应用程序供生产使用 为此,我们运行build命令: ng build --aot -prod 65% building modules 465/466 modules...更早地运行构建,因此更容易修复。 国际化 构建我们的应用程序的另一个原因是Angular如何处理国际化,或者以简单的语言来讲,国际化。Angular不会在运行时处理它,而是在编译进行处理。

    42.6K10

    ng-content 中隐藏的内容

    如果 ng-content 没有设置 select 属性,它将接收全部内容,或接收不匹配任何其他 ng-content 元素的内容。...请注意,目标 ng-content 会优先于 catch-all,即使它在模板中的位置靠后。 ngProjectAs 有时你的内部组件会被隐藏在另一个更大的组件中。...因为 ng-container 容器不再匹配 select="counter"。为了解决这个问题,我们必须使用 ngProjectAs 属性,它可以应用于任何元素。...Time to poke and prod 我们从一个简单的实验开始:将两个 块放在我们的模板中,没有选择器。会出现什么情况?...因为 ng-content 只是移动元素,所以可以在编译完成,而不是在运行时,这大大减少了实际应用程序的工作量。

    2.7K30

    Angular 工具篇之npx及angular-cli-ghpages

    一次性执行外部库 对于不经常使用的全局二进制文件,你可以不在本机上进行全局安装,而是需要使用 npx 即时下载并执行二进制文件。...它确保你始终使用最新版本的生成器或构建工具,而无需每次使用它进行升级。...前,你需要进行项目构建,这时你可以执行以下命令: $ ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"...或者使用以下命令: $ ng build --prod --base-href "/REPOSITORY_NAME/" 项目构建完成后,就可以通过以下的命令自动地把本地项目发布到 Github Pages...: $ npx ngh [OPTIONS] 需要注意的是对于使用 Angular CLI 6 以上版本的用户来说,部署你需要指定部署的目录: $ npx ngh --dir=dist/[PROJECTNAME

    1.9K20

    AngularJS in Action读书笔记1——扫平一揽子专业术语

    自以为已经达到熟悉ng的程度,但是因为刚入公司,没法直接接触代码层面的编程,日子一天天过去,ng我脑海的残留也一天天的模糊……   数月后,我重返ng战场,艰难的收集之前留下的记忆碎片,一番拼接下来,...回想jQuery还需要通过DOM中找到需要的元素并在其添加事件监听,通过触发事件(如点击等)才能解析获取DOM元素中的值。...而在AngularJS中只需要将DOM中的元素与js的某个属性绑定,js属性值变化会同步到DOM元素,同样的,DOM元素值得变化也会映射到js的属性。夸张点说,一个是刀耕火种,一个是蒸汽驱动。...书中的实例   书中提供了一个实例Angello,托管github上面,这也是我比较欣赏的地方,很方便,git pull下来只要几步就可以轻松运行起来。...当然,来自view端值发生改变,也会通过ViewModel的值改变,进而刷新model的值。这就是双向数据绑定。

    1.2K70

    Vue源码探秘(一)

    Vue.js 在做 2.0 重构的时候, ES2015 的基础,除了 ESLint 保证代码风格之外,也引入了 flow 做静态类型检查。...flow Vue.js源码中的应用 flow常用的两种类型检查方式是: 类型推断:通过变量的使用上下文来推断出变量类型,然后根据这些推断来检查类型。...类型注释:事先注释好我们期待的类型,flow 会基于这些注释来判断。 Vue.js 的主目录下有 .flowconfig 文件, 它是 flow 的配置文件。...,阅读源码的过程中,遇到一些想具体了解的类型定义,可以来到flow文件夹下,查看具体的类型数据结构的定义。...编译工作可以构建项目的时候借助 webpack、vue-loader 等插件来完成,也可以项目运行时使用 Vue 的构建功能来完成。

    1.5K41
    领券