angular: Ivy preview report: Error: ASSERTION ERROR: Reached the max number of directives

Hi! Error when click on catalog item… Without Ivy all worked correctly.

Error: ASSERTION ERROR: Reached the max number of directives

image image

<app-store-catalog [baseUrl]="'catalog/'"></app-store-catalog>

<div class="catalog">
  <div *ngFor="let category of (categories$ | async)" [routerLink]="baseUrl + category.path" class="catalog-module">
    <div class="catalog-header">{{category.name}}</div>
    <div class="catalog-body">
      <div class="catalog-img">
        <img [src]="category.image">
      </div>
    </div>
    <div class="catalog-footer">{{category.description}}</div>
  </div>
</div>
import {Component, Input, OnInit} from '@angular/core';
import {CartHomeService} from "../../../catalog/cart-home.service";
import {map} from "rxjs/operators";

@Component({
  selector: 'app-store-catalog',
  templateUrl: './store-catalog.component.html',
  styleUrls: ['./store-catalog.component.scss']
})
export class StoreCatalogComponent implements OnInit {
  categories$;

  @Input() baseUrl = '';

  constructor(private catalogService: CartHomeService) {
  }

  ngOnInit() {
    this.categories$ = this.catalogService.getList().pipe(
      map(x => x.items)
    );
  }
}
Angular CLI: 8.1.0-beta.2
Node: 11.14.0
OS: win32 x64
Angular: 8.1.0-next.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.801.0-beta.2
@angular-devkit/build-angular      0.801.0-beta.2
@angular-devkit/build-ng-packagr   0.801.0-beta.2
@angular-devkit/build-optimizer    0.801.0-beta.2
@angular-devkit/build-webpack      0.801.0-beta.2
@angular-devkit/core               8.1.0-beta.2
@angular-devkit/schematics         8.1.0-beta.2
@angular/cdk                       8.0.1
@angular/cli                       8.1.0-beta.2
@angular/material                  8.0.1
@ngtools/json-schema               1.1.0
@ngtools/webpack                   8.1.0-beta.2
@schematics/angular                8.1.0-beta.2
@schematics/update                 0.801.0-beta.2
ng-packagr                         5.3.0
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.34.0

Is this a bug?

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 13
  • Comments: 31 (10 by maintainers)

Commits related to this issue

Most upvoted comments

In general if you see this error, it means that there was some error while we were constructing the template for the first time. We’re currently working on a fix so that these framework errors don’t mask errors in your code.

Hi, just want to provide some additional information after further investigation.

It looks like ASSERTION ERROR: Reached the max number of directives error appears because there is some other error (most likely a fatal one) that happened in the app at creation time, but was caught by the error handling logic (presumably in Router). We will look into this more and try to handle this case better and surface relevant error.

As a temporary workaround, please try to find the original error by pausing on all exceptions in browser dev tools, for example as described here. Fixing original error should make this assertion disappear as well.

Thank you.

Hi,

I think i’ve managed to get a reasonable repro: https://github.com/rerion/demo-broken-ivy

Steps to reproduce: launch the app, click the link

What happens here:

-> this component tries to initialize, but fails because of write here: https://github.com/rerion/demo-broken-ivy/blob/wat/src/app/table-column.component.ts#L18-L23 (should it?) -> this causes module load to fail, last url state to be restored, but for some reason TableComponent reinitializes, and error occurs on first structural directive (some dangling subscription?) https://github.com/rerion/demo-broken-ivy/blob/wat/src/app/table.component.ts#L8

guys, just an intuition here…

But, whoever has this issue, can you verify that you don’t have entryComponents and analyze_for_entry_components anywhere in your code?

If so, try removing all of them and check if the error is gone.

I’m not sure if this is also impacted by 3rd party libs doing the above, but let’s start by trying to remove this first.

image

I have similar error, but I think appear if I use FormBuilder.