开发：你永远不知道报错和成功哪一个先来

发表于 更新于 分类于 阅读次数：
本文字数： 6.4k 阅读时长 ≈ 6 分钟
人类终于回想起了被 Error 支配的恐惧

前端 Error

Angular

ng build相关错误：这里

1.Error NG8002 Can’t bind to…

信息：Can't bind to 'formControl' since it isn't a known property of 'input'.
场景：试图给 <input> 标签施加 formControl 这个 Directive 的时候出现
方法：在 app.module.ts 中导入 ReactiveFormsModule 模块，并在 NGModule 中的 imports 字段中引入

2.类型“string | null”的参数不能…

信息：类型“string | null”的参数不能赋给类型“string”的参数
场景：当将 localstorage 获取到的值转化为JSON格式时出现
原因：localstorage 返回的类型为 string || null，而 JSON.parse() 函数接收的是字符串类型，所以会报错
办法：

  • 先使用判断语句判断返回值是否为空，不为空时强制将其类型设置为 string

  • 也可以在 JSON.parse() 函数中使用或运算符，当 localstorage 返回为 null 时就使用或运算符后面的内容

3.Error TS2322Type ‘Event’ is not…

信息：Type 'Event' is not assignable to type 'string'.
场景：当我在模板中使用 [(ngModule)] 时出现该错误
原因：缺少 FormModule 模块
办法：

  • 如果项目中只有一个 module，那么就在 app.module.ts 中引入

  • 如果项目中有其他 module，且该模板基于该 module，那么就在该 module 中进行引入

4. No value accessor for form control…

信息：No value accessor for form control with unspecified name attribute
场景：当我在模板中使用 [(ngModule)] 时出现该错误
原因：双向绑定出现在了非常规的地方，比如我这里是绑定在了 <label> 标签上，同理 <span>/<div> 等都会出现
办法：在双向绑定的标签内加入这一选项 ngDefaultControl，用于写入值和侦听输入元素更改

CSS

1.Function rgb is missing argument $green

信息：Function rgb is missing argument $green
原因：

  • 定位报错位置，可以看到是在设置 box-shadow 样式时出了问题：box-shadow: 0px 3px 6px -4px rgb(0 0 0 / 12%)

  • 这里在设置rgba时使用了新的标准，即使用rgb函数，内部无需使用逗号分割，最后一位使用斜杠+百分比当做透明度，不填默认为100%

  • 而这里报错是因为当前项目中使用的 node-sass 中还没有引用该标准导致无法正常编译

办法：换成正常的rgba()表达式即可
参考：回答 / 标准

ESLint

1. Do not access Object.prototype…

信息：Do not access Object.prototype method 'hasOwnProperty' from target object
原因：在代码中直接使用 Object.hasOwnProperty(key) 方法去检验一个对象中是否含有指定属性值
规则：no-prototype-builtins
办法：

  • 从Object的原型访问 hasOwnPropertyMethod 并使用call执行函数

  • 没有做任何使属性不可枚举的检查对象的等效方法 {}.propertyIsEnumerable.call(events, key)

  • 通过 getOwnPropertyDescriptor 方法

参考：Yujiaao

2.Component name “Home” should…

信息：Component name "Home" should always be multi-word.
原因：该报错出现在 Vue 项目中，官方风格中，除了根组件（App.vue）以外的其余组件应该由多个单词构成，防止和原生的 HTML 标签冲突。最新的Vue-cli中已经内置了最新的 vue/cli-plugin-eslint 插件且v7.20.0版本之后就引用了 vue/multi-word-component-names 规则
规则：vue/multi-word-component-names
办法：参考wally94这篇原创文章有如下几个方法：

  • 按要求更改组件名为多个单词大驼峰或-连接

  • 关闭该条 ESLint 规则校验：关闭所有组件名校验、忽略指定组件名

1
2
3
4
5
6
// 关闭校验
"vue/multi-word-component-names": "off",
// 忽略指定组件名
"vue/multi-word-component-names": ["error", {
    "ignores": ["Hmoe"]
}]

参考：wally94

3.Importing this module is blacklisted…

信息：Importing this module is blacklisted. Try importing a submodule instead.
原因：在 Angular 项目中导入模块报的错，即 import { Observable } from 'rxjs';，原因报错也说明了，尝试引入子模块
办法：使用 import { Observable } from 'rxjs/Observable'; 即可

4.Error ‘××ב is assigned to…

信息：error ‘××ב is assigned to itself no-self-assign
原因：不能把变量本身赋值给变量自己

1
2
let a = 1;
a = a;

办法：将变量赋值给新的变量即可

Npm

1.安装 node-sass 失败

信息：Failed at the node-sass@4.13.0 postinstall script
原因：待查证，网上说是因为npm国外镜像不稳定的原因
办法：

  • 去 Github 中下载对应系统的最新 node-sass 文件，并放置到一个比较容易找到的目录中

  • 在自己的项目中找到 .npmrc 文件（没有请自建），添加如下代码：

1
2
registry=设置npm源
SASS_BINARY_PATH=E:/xxx/win32-x64-57_binding.node(下载文件对应位置)

  • 重新执行 npm install 报错消失

2.npm ERR! errno ETIMEDOUT

信息：

1
2
3
4
5
6
7
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/@antv%2fg6 failed, reason: connect ETIMEDOUT 104.16.16.35:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

原因：考虑到可能是未知的代理导致的该问题
办法：

  • 将 proxy 和 https-proxy 设置为 null，参考 @Sunnky

  • 将代理配置删除，参考 @Akshay Reddy

3.Error: Cannot find module ‘xxx’

信息：Error: Cannot find module 'is-plain-object'
原因：在 WebPack 打包时没有找到该模块
办法：删除 node_modules 文件夹并清除 npm 缓存再重新安装依赖

TypeScript

TypeScript错误码大全：这里

1.String does not match the…

信息：String does not match the pattern of "^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$".
原因：package.json 文件中的名字必须全为小写

2.Property ‘value’ does not…

信息：Property 'value' does not exist on type 'EventTarget'
原因：出现此报错大概率是在获取 event.target.value 时遇到的，在 js 中很明显它是正常的，但是在 ts 中就显得不太正常了，因为并不是所有的 HTMLEmelent 上都含有 target 属性，所以才会出现报错
办法：为你的 HTML 元素执行明确的类型断言，例如：(e.target as HTMLButtonElement).value

3.Parsing error: Unexpected token…

信息：Parsing error: Unexpected token. Did you mean {'>'} or &gt;?
原因：在该行代码处使用了标签形式的类型声明，而 ESlint 在检测的时候误以为 HTML 标签：

1
2
// 这里的<number>
this.corpusMaxNum = <number>res.paramList.filter(item => item.id === 'Titan.Model.Corpus.MaxNum')[0].value;

办法：使用 as 进行类型断言即可

1
this.corpusMaxNum = res.paramList.filter(item => item.id === 'Titan.Model.Corpus.MaxNum')[0].value as number;

4.Timer类型

在 ts 文件中如果想要使用定时器，需要给定时器设置一个类型，虽然定时器返回的是 number 类型，但是如果按 number 类型定义时会出错，所以需要借用 NodeJS.Timer 来进行定义

1
2
import Timer = NodeJS.Timer;
private timer: Timer;

这时会出现报错 'NodeJS' is not defined.eslint

解决办法参考该 issue

5.TS2339:Property ‘wheelDelta’…

信息：TS2339:Property 'wheelDelta' does not exist on type 'WheelEvent
场景：需要监控鼠标滚轮事件时，通过 event.wheelDelta 属性的正负来判断鼠标滚轮滚动的方向
原因：通过 MDN文档 查看该属性被标注为 Deprecated/Non-standard ，发现该属性已被弃用
办法：现在可以使用 deltaY 属性来替代 wheelDelta 属性，但需要注意的是，该属性的判断值刚好和 wheelDelta 属性相反，即当 event.deltaY < 0 时代表向上滚动，当 event.deltaY > 0 时代表向下滚动

6.类型“unknown”上不存在属性“xxx”

信息：类型“unknown”上不存在属性“offsetWidth”
原因：在Vue项目中使用 $refs 获取元素的 offsetWidth 时报错，是因为没有给钙元素进行类型断言
办法：声明该元素是哪个HTML元素类型即可

Vue

1.不能将类型"{}“分配给类型"xxx”

信息：不能将类型"{}"分配给类型"IntrinsicAttributes......"
原因：此报错大概率出现在使用代码片段生成一个Vue模板时，且使用了 new Vue({}) 方法来创建Vue实例
办法：检查子组件Vue实例的配置项中是否有空的 props 属性，删掉该无用配置项即可（如果你不需要父子组件之前传值）

2.Extraneous non-emits event…

信息：Extraneous non-emits event listeners (viewModeChange, modelConfigChange) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
原因：子组件中的结构没有放在一个根容器中
办法：

  • 将子组件的结构放在一个div中即可

1
2
3
4
5
<template>
    <div>
        ...子组件内容
    </div>
</template>

  • 使用 @Options 注解并用 emits 传出相应参数即可（使用vue-class-component时可以使用这种方法）

1
2
3
4
import { Options } from 'vue-class-component';
@Options({
    emits: ['viewModeChange', 'modelConfigChange']
})

3.Property “options” was accessed…

信息：Property "options" was accessed during render but is not defined on instance
原因：该组件上使用 v-model 绑定的属性没有定义初始值
办法：找到该属性值，根据其类型定义一个初始值

1
2
// 这里是使用了 vue-class-component 插件写的语法
public showSelectValues: Array<string> = [];

后端 Error

Java

1.This application has no explicit…

信息：This application has no explicit mapping for /error, so you are seeing this a fallback 404 Not found
原因：本人在本地部署了公司的项目，前端静态资源路径配置出错导致
办法：重新配置前端静态资源路径，重启服务，解决问题

2.PKIX path building failed: …

信息：PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilde
原因：生成的安全证书未导入到 jdk 信任库中
办法：

  • 将安全证书 andy_cer_ip.cer 复制web服务运行的 jdk 安装目录的 jre/lib/security 或者 jdk-11.0.12\lib\security（jdk11 以上无 jre 路径） 目录中

  • 在命令行中执行：keytool -import -alias andy_keystore_ip -keystore cacerts -file andy_cer_ip.cer 即可（执行更改证书路径与名称）