全网最全Angular10异常总结，帮助刚初学Angular10的新手 快速上手公司的前端项目

Angular常见错误汇总

刚开始使用Angular2最为前端开发框架时，遇到问题分散在一篇篇博客里面，我现在将我遇到的问题，以及解决方案汇总到一篇博客里面，希望能帮到Angular开发的Coder

1.Type ‘UserViewModel’ is missing the following properties from type ‘UserViewModel[]’: length, pop, push, concat, and 26 more

分析报错信息：报错上面说UserViewModel 这个类没有定义一些UserViewModel[] 数组的属性length，pop，push等，这就说明，在某个地方，你本来是要用UserViewModel[] 但是 你却用的是 UserViewModel类，所以快速定位到报错行，看是不是定义错了，但是定位到62行，发现定义的是数组。p是返回的json数据，但是get 泛型定义的却是一个UserViewModel对象，问题就出现在这，修改过来就好了。

错误写法

this.http.get<UserViewModel>("http://localhost:28089/user/list").toPromise().then((p) => {
        this.listOfData = p;
    })

正确写法

this.http.get<UserViewModel[]>("http://localhost:28089/user/list").toPromise().then((p) => {
        this.listOfData = p;
    })

1.1.Can’t bind to ‘ngClass’ since it isn’t a known property of ‘div’.

解决方案：

import {  CommonModule } from '@angular/common';

2.ERROR Error: Uncaught (in promise): Error: No provider for Http!

解决方案：

providers: [Http]

3.ERROR Error: Uncaught (in promise): Error: No provider for ConnectionBackend!

解决：以下答案来自overstackflow

Http is redundant in
providers: [FrameService, Http, { provide: $WINDOW, useValue: window }],
because HttpModule in
imports: [HttpModule, BrowserModule, FormsModule],
provides it already.

4.ERROR Error: Uncaught (in promise): Error: Template parse errors:Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’.

解决方案1

@NgModule({
  imports: [CommonModule]
})

or if you don’t mind the module being locked to be browser-only

解决方案2

@NgModule({
  imports: [BrowserModule],
})

5.implements interface ‘OnInit’.Property ‘ngOnInit’ is missing in type ‘BfMenuItem’.

解决：添加 ngOnInit() 生命周期

6.Uncaught (in promise): Error: Expected ‘styles’ to be an array of strings.

解决： 查看styleUrls 样式引入写法是否有问题
错误写法：

styleUrls: ['./bf-header-msg.component']   

正确写法:

styleUrls: ['./bf-header-msg.component.scss'],

7.Can’t bind to ‘routerLink’ since it isn’t a known property of

解决：

 import { RouterModule} from '@angular/router';

8.Unexpected closing tag “ba-breadcrumb”. It may happen when the tag has already been closed by another tag.

解决：标签没有闭合，或闭合标签错误。

9.ERROR Error: Uncaught (in promise): Error: Template parse errors:‘bf-breadcrumb’ is not a known element:If ‘bf-breadcrumb’ is an Angular component, then verify that it is part of this module.

解决：
错误原因1：declarations: [] 在元数据中声明当前组件
错误原因2：组件元数据中选择器属性和html中标签不匹配

10.ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘pages/demo’

解决：路由配置错误，查看路由配置

11.Error: Unexpected value ‘BfbreakcrumbComponent’ declared by the module ‘BfHomeModule’. Please add a @Pipe/@Directive/@Component annotation.

解决：添加注解 @Pipe/@Directive/@Component

12. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

解决： 引入FormsModule

import { FormsModule} from "@angular/common";

13.菜单跳转路由失败的原因。（提示路径不匹配，match）

解决：
原因1：在menu.config.ts配置文件中配置出错。
原因2：在menu.config.ts配置没有问题。开发的模块代码出错也会提示路径不匹配，以下是遇到的原因。
原因3：服务没有在模块中注入。

14.Can’t bind to ‘label’ since it isn’t a known property of ‘button’.

解决：在button标签中，并没有label属性，label是属于其他组件封装的属性，需要引入相对应的模块。

15.Can’t bind to ‘ngClass’ since it isn’t a known property of ‘div’.

解决：

import { CommonModule } from "@angular/common";

16.Unexpected module ‘BrowserAnimationsModule’ declared by the module ‘AppModule’. Please add a @Pipe/@Directive/@Component annotation.

错误原因：declarations: [] ,在这个元数据中引入了模块，导致引入位置错误，
解决：在imports: [] 引入模块。

17.ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value

解决： 组件使用中，是否存在异步调用问题，解决异步调用中，处理数据还没有加载的情况。

18.Error: No NgModule metadata found for ‘undefined’.Error: No NgModule metadata found for ‘undefined’.

解决：路由配置错误，检查路由配置路径和模块是否对应

{
    path: 'demo/treedemo',
    loadChildren: './scene/searchform/demo.module.ts#DemoModule'
}

19.The pipe ‘json’ could not be found

解决：

import { CommonModule } from '@angular/common';

@NgModule({
    ...
    imports: [ CommonModule ]
    ...
})

20.If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as ‘standalone’ in ngModelOptions

解决： input 添加name属性

21.Template parse errors:There is no directive with “exportAs” set to “ngModel”

解决： 给input绑定[(ngModel)]="inputValue"

22.Failed to execute ‘setAttribute’ on ‘Element’: ‘(ngModel)]’ is not a valid attribute name.

解决： (ngModel)], 少写一个 [

23.There is no directive with “exportAs” set to “ngModel”

解决：

import { FormsModule }   from '@angular/forms';2.[(ngModel)]="oldPwdValue"

绑定数据

24.ERROR Error: No provider for ChildrenOutletContexts!

解决：routing 模块没有在主模块中引入，routing模块并不能单独存在。