angular5报错集合

以下是个人曾经在angular中遇到各种报错问题，在此整理以下，仅供参考

报错一：

The Angular Compiler requires TypeScript >=3.1.1 and < 3.3.0 but 2.9.2 was found instead.

原因：Angular Compiler需要Typescript 在3.1.1至3.3.0之间，但是当前安装了2.9.2版本

报错解决：进行升级
安装TypeScript版本3.1.1至3.3.0之间即可，具体命令为：

$ npm i typescript@">-3.1.1 <3.3.0"

---

报错二：

Cannot read property ‘getContext’ of null
原因：是因为dom元素还没加载好，就调用了导致的。

以上错误是我在angular5项目中这么使用代码导致。请看代码。

在canvas-text.component.html中，给canvas元素id值。

<canvas id="canvas" style="border:1px solid red" [width]="canvasObj.canvasWith" [height]="canvasObj.canvasHeight">浏览器过低不支持canvas显示</canvas>

在canvas-text.component.ts中，我当时直接使用 document.getElementById(‘canvas’)获取的。但是由于页面dom元素未加载完就获取，自然报错。

this.canvasId = document.getElementById('canvas');
this.canvasPen = this.canvasId.getContext("2d");
this.canvasEvent(this.canvasId);

解决方法：
在canvas-text.component.html中,给canvas元素起一个引用名字#myCanvas，便于查找该元素。

<canvas id="canvas" #myCanvas style="border:1px solid red" [width]="canvasObj.canvasWith" [height]="canvasObj.canvasHeight">浏览器过低不支持canvas显示</canvas>

在canvas-text.component.ts中，导入Renderer2, ElementRef, ViewChild，其中@viewChild是用来查找引用dom元素的，与document.getElementById(‘canvas’)同样道理。

import { Component, OnInit, Renderer2, ElementRef, ViewChild } from '@angular/core';
@ViewChild('myCanvas') myCanvas:ElementRef;

drawCanvas(){
this.canvasId=this.myCanvas.nativeElement;
this.canvasPen=this.canvasId.getContext("2d");
this.canvasEvent(this.canvsId);
}

---

报错三：

No value accessor for form control with unspecified name attribute
原因：这个是因为 [(ngModel)]是双向绑定，[(ngModel)]属性是绑定在input上的，若绑定其他元素如div，span等就会出现上面错误。

解决办法就是在span标签内同时加个ngDefaultControl就行。

---

报错四：

angular报错:Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

解决：
在 app.module.ts中 导入 FormsModule 。

import { FormsModule } from '@angular/forms'; 

在app.module.ts 把 FormsModule 添加到 @NgModule 元数据的 imports 数组中。

imports: [
BrowserModule,
FormsModule],

---

报错五

angular报错 Data path “.builders[‘app-shell’]” should have required property ‘class’。

原因不明，个人猜测可能是项目代码中的package.json的devDependencies中是@angular-devkit/build-angular": ^0.800.3，但我本地环境是"@angular-devkit/build-angular": "~0.13.0不一致导致的。

这是项目代码的package.json的devDependencies中

"@angular-devkit/build-angular": "^0.800.3",

本地环境是"@angular-devkit/build-angular": “~0.13.0

解决：
“@angular-devkit/build-angular”: “^0.800.3”,修改为”@angular-devkit/build-angular": “~0.13.0”,

---

报错：
Invalid configuration of route ‘’. One of the following must be provided: component, redirectTo, children or loadChildren
原因：路由没有配置好，配置好路由就可以解决。
当然，此处一定注意，当年你在app.module.ts跟模块中导入多个模块比如meetModule，userModule等，一定检测查每个模块路由是否都配置好。注意此处多个模块放置顺序问题。

因为我是因为meetmodule模块（没配好路由）放置在usermodule（已经配好路由）之前导致的我怎么配usermodule模块路由都报错此错，明明usermodule没配错，但就报这个错，后面发现是我前一个模块meetmodule忘记配路由了。

---

报错六：

No provider for ChildrenOutletContexts!

解决：
在app.module.ts添加
RouterModule.forRoot(//没添加导致的错误
routes,//路由配置
{ enableTracing: true }
)
如下：

const routes11: Routes = [
  {
    path: 'home',
     component:HomeComponent
]
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    ClientModule,
   RouterModule.forRoot(//没添加导致的错误
    routes,//路由配置
    { enableTracing: true } 
  )
  ],
  .............
  })

报错七：

报错Error: Angular JIT compilation failed: ‘@angular/compiler’ not loaded!

解决：
在Main.ts文件中导入@angular/compiler

import '@angular/compiler';

angular.json文件中，把“aot”:true 改为false即可。