Angular4错误提示的说明（一）

2019独角兽企业重金招聘Python工程师标准>>>

错误一：

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/Manufactu
rerListComponent.ngfactory.js'.

这个错误很可能是一个误导，你可能根本没有用到XMLHttpRequest。添加测试命令的参数，可以发现真正的导致错误的原因。

ng test --sourcemaps=false
或者
npm test --sourcemaps=false
或者
yarn test --sourcemaps=false

此时错误变成了：

        Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value:
 '0'. Current value: '12'.

这个错误名称有点长，ExpressionChangedAfterItHasBeenCheckedError。这个错误会在开发模式下的测试时产生，开发模式要求数据模型是稳定的，如果在单个变化检测过程中发生了数据变化就会抛出这个异常。请看下面的代码：

  <mat-paginator #paginator
                [length]="dataSource.resultsLength"
                [pageIndex]="0"
                [pageSize]="5"
                [pageSizeOptions]="[5, 10, 25, 100]">
  </mat-paginator>

如果一开始datasource.resultsLength等于0，等到datasource从后端获取数据将这个值修改成12，就会抛出这个错误。从逻辑上来说，实际运行的系统就是这样，没有什么错误，在product模式下也不会出错。但是在dev模式下就会出错，所以在测试代码中一开始就将datasource.resultsLength设置成12，然后获取数据之后也是12，就可以消除这个错误。

class HttpDatastoreServiceStub {
  findAll(jsonapiObjectType: Manufacturer,
     page: PageCursor | PageOffsetLimit | PageNumberSize, sort: SortPhrase[],
      filter: FilterPhrase[], params?: any): Observable<ListBody<ManufacturerAttributes, Manufacturer>> {
        let lb = MANUFACTURERS_BODY as ListBody<ManufacturerAttributes, Manufacturer>;
    console.log(page);
    if (isPageOffsetLimit(page)) {
      lb.data = lb.data.slice(page.offset, page.limit + page.offset);
    }
    return Observable.of(lb);
  }
}

@Injectable()
class ManufacturerServiceMock {
    constructor(private _datastore: HttpDatastore) {
    }
     getDatasource(): ManufacturerDatasource {
       let mfds = new ManufacturerDatasource(this._datastore);
       mfds.resultsLength = 12;
       return mfds;
     }
  }
let httpDatastoreServiceStub = new HttpDatastoreServiceStub();

从测试的目的来说，也确实只需验证单个数据模型对应的视图即可。

转载于:https://my.oschina.net/jianglibo/blog/1574261