Different instances of Ability in root and lazy loaded module

[rodrigoreal]

I'm using with angular and i've just upgraded the version of the package and it stopped working.
@casl/ability: 2.4.2 -> 2.5.1
@casl/angular: 0.3.1 -> 0.4.1
When i downgraded back to the previous version it worked again.
I'm trying to find if there is any breaking change between these versions but I did not find anything related.
Below is a part of my code:

// defining the rules
import { AbilityBuilder, Ability } from '@casl/ability';
constructor(private ability: Ability) {}
rules() {
  const { rules, can } = AbilityBuilder.extract();
  can('create', 'customer');
  can('delete', 'customer');
  this.ability.update(rules);
}

// app.module.ts
import { NgModule } from '@angular/core'
import { AbilityModule } from '@casl/angular'
// ...

@NgModule({
  imports: [
    ...,
    AbilityModule
  ],
  declarations: [...],
  bootstrap: [...],
})
export class AppModule {}

<button mat-raised-button color="primary" class="add-button" (click)="addCustomer()" *ngIf="'customer' | can: 'create'">
  <mat-icon>add</mat-icon>
  {{ 'shared.addCustomer' | translate }}
</button>

[stalniy]

The only thing which was changed in Angular package is dynamic typings and metadata generation.

I tested that on Angular 7 and it worked ok. Could you please share your your version of Angular?

[stalniy]

Also it’d be helpful to see error message

[rodrigoreal]

I'm using angular 6.1.6 and i don't get any error, it just don't work, it is like all rules aren't allowed.
In this example i say can('create', 'customer') and in the button i use *ngIf="'customer' | can: 'create'", the button should appear but does not appear, but if i downgrade to the previous version it work as expected.

[stalniy]

I generated project using angular cli and manually changed versions to 6.1.6 and it works as expected. Could you please check this repo https://github.com/stalniy/casl-angular-sample and try to reproduce your error?

[stalniy]

@rodrigoreal, have you tested provided repo?

[rodrigoreal]

The problem is that the rules are not being passed to a lazyloaded module.
I've forked your repo and reproduced the error, you can check it here:
https://github.com/rodrigoreal/casl-angular-sample

Run the application and go to http://localhost:4200/lazyloaded and look at your console on devtools.
You will see that:

rules from app.component [{…}]0: {actions: "manage", subject: "customer"}length: 1__proto__: Array(0)

But from the lazyloaded module the rules array is being empty

rules from lazyloaded module []

[stalniy]

I see. The issue with lazy loaded modules fixed in @casl/[email protected].
You need to use AbilityModule.forRoot() in the main module (AppModule) and AbilityModule in lazy loaded or child modules.

I added a note about this in README for @casl/angular

[stalniy]

Thanks for the issue!