刚开始开发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模块并不能单独存在。