angular 常见错误汇总

刚开始开发angular2 项目时,遇到问题有查找一些问题的解决步骤汇总,现在把它分享出来也许能帮助到开发angular2+ 项目的人。

  1. Can't bind to 'ngClass' since it isn't a known property of 'div'.

解决方案:

import {  CommonModule } from '@angular/common';
  1. ERROR Error: Uncaught (in promise): Error: No provider for Http!

解决:

providers: [Http]
  1. 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.

  1. 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],
})
  1. implements interface 'OnInit'.Property 'ngOnInit' is missing in type 'BfMenuItem'.

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

  1. Uncaught (in promise): Error: Expected 'styles' to be an array of strings.

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

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

正确写法:

styleUrls: ['./bf-header-msg.component.scss'],
  1. Can't bind to 'routerLink' since it isn't a known property of

解决:

 import { RouterModule} from '@angular/router';
  1. Unexpected closing tag "ba-breadcrumb". It may happen when the tag has already been closed by another tag.

解决:标签没有闭合,或闭合标签错误。

  1. 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中标签不匹配

  1. ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'pages/demo'

解决:路由配置错误,查看路由配置

  1. 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";
  1. 菜单跳转路由失败的原因。(提示路径不匹配,match)

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

  1. Can't bind to 'label' since it isn't a known property of 'button'.

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

  1. Can't bind to 'ngClass' since it isn't a known property of 'div'.

解决:

import { CommonModule } from "@angular/common";
  1. Unexpected module 'BrowserAnimationsModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

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

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

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

  1. Error: No NgModule metadata found for 'undefined'.Error: No NgModule metadata found for 'undefined'.

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

    {
        path: 'demo/treedemo',
        loadChildren: './scene/searchform/demo.module.ts#DemoModule'
    }
  1. The pipe 'json' could not be found
    解决:
import { CommonModule } from '@angular/common';
@NgModule({
    ...
    imports: [ CommonModule ]
    ...
})
  1. 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属性

  1. Template parse errors:There is no directive with "exportAs" set to "ngModel"

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

  1. Failed to execute 'setAttribute' on 'Element': '(ngModel)]' is not a valid attribute name.

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

  1. There is no directive with "exportAs" set to "ngModel"

解决:

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

绑定数据

  1. ERROR Error: No provider for ChildrenOutletContexts!
    解决:routing 模块没有在主模块中引入,routing模块并不能单独存在。

你可能感兴趣的:(angular 常见错误汇总)