@lifecycleHooks does not work

I created a simple hook class

export class UserLifecycleHooks {
	constructor(@IUserState readonly user: IUserState) {

	created(vm: any): void {
		vm["$user"] = this.user;

And I register it as a global hook


But it does not work. The hook’s constructor is called (that means the hook registry is fine). But the hook’s method “created” is not called when components (custom elements) are created.

Did I miss something?

Hi @hoangcuongvn! I think you might be confusing the routing lifecycle hooks with component lifecycle hooks. AFAIK the hooks you define with the @lifecycleHooks() are the routing hooks which can be one of the following: canLoad, load, canUnload, unload.

@Sayan751 According to the link below, @lifecycleHooks attribute is for component lifecycle hooks.

Here is a sample from the link.

// lifecycle-logger.js
export class LifecycleLogger {
  constructor(@ILogger logger) { this.logger = logger; }
  define(vm) { this.trace('define', vm); }
  hydrating(vm) { this.trace('hydrating', vm); }
  hydrated(vm) { this.trace('hydrated', vm); }
  created(vm) { this.trace('created', vm); }
  binding(vm) { this.trace('binding', vm); }
  bound(vm) { this.trace('bound', vm); }
  attaching(vm) { this.trace('attaching', vm); }
  attached(vm) { this.trace('attached', vm); }
  detaching(vm) { this.trace('detaching', vm); }
  unbinding(vm) { this.trace('unbinding', vm); }
  canLoad(vm) { this.trace('canLoad', vm); return true; }
  load(vm) { this.trace('load', vm); }
  canUnload(vm) { this.trace('canUnload', vm); return true; }
  unload(vm) { this.trace('unload', vm); }
  trace(hook, vm) { this.logger.trace(`${hook} ${vm.$controller.definition.name}`); }

// index.js

The issue is still open that means that it is not yet fully implemented. However, you can leverage the component hooks in individual custom elements.

Ah, I thought it was implemented because that thread was long time ago.

I am curious how Au2 framework injects the property $controller into every VM?