Property 'active' does not exist on type 'component' angular error

Question

Property 'active' does not exist on type 'component' angular error while compiling and building application

Answer 1

I don't see any code to help you better. I'm just guessing here. Though, maybe you are using something like this:

<a class="list-group-item list-group-item-success clearfix bottom-buffer" [routerLink]="[recipe.id]" [routerLinkActive]="active">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{recipe.name}}</h4>
    <p class="list-group-item-text">{{recipe.description}}</p>
  </div>

  <span class="pull-right">
    <img
      [src]="recipe.imagePath"
      alt="{{recipe.name}}"
      class="img-responsive img-rounded"
      style="max-height: 50px"
    >
  </span>
</a>

But instead you should be using this:

<a class="list-group-item list-group-item-success clearfix bottom-buffer" [routerLink]="[recipe.id]" [routerLinkActive]="'active'">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{recipe.name}}</h4>
    <p class="list-group-item-text">{{recipe.description}}</p>
  </div>

  <span class="pull-right">
    <img
      [src]="recipe.imagePath"
      alt="{{recipe.name}}"
      class="img-responsive img-rounded"
      style="max-height: 50px"
    >
  </span>
</a>

It just happened to me a few moments ago.

In Summary:

You must pass the css class 'active' into of the routerLinkActive directive, using single quotes inside of the double quotes.