Angular: AoT compile error with Model decorator

[shaungrady]

Using Angular 8.2.14 and spraypaint 0.10.14, when compiling with AOT enabled, this error is shown:

ERROR in spraypaint/lib-esm/decorators.ts(14,15): Error during template compile of 'Model'

Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler.

I'm not really sure how to proceed with this issue.

[piotrpalek]

@shaungrady did you ever resolve this? I've had a similar issue with Angular

[shaungrady]

@piotrpalek The decorators aren't supported by Angular's View Engine. You'll need to use Ivy, if you can. We ended up using the non-decorator syntax:

import { attr, hasMany, SpraypaintBase } from 'spraypaint';

import { ApiV3ApplicationRecord } from '@api/v3/models/_base.model';
import { ResourceType } from '@api/v3/shared/resource-type.enum';
import { Associate } from '@api/v3/models/associate.model';

export interface User extends IUserAttrs, UserMethods, SpraypaintBase {}

export const User = ApiV3ApplicationRecord.extend<ApiV3ApplicationRecord, IUserAttrs, UserMethods>({
  static: { jsonapiType: ResourceType.User },

  attrs: {
    createdAt: attr({ persist: false }),
    updatedAt: attr({ persist: false }),

    firstName: attr(),
    lastName: attr(),
    
    associates: hasMany(ResourceType.Associate),
  },

  methods: {
    fullName(): string {
      return `${this.firstName} ${this.lastName}`.trim();
    },
  },
});

export interface IUserAttrs {
  createdAt: string;
  updatedAt: string;

  firstName: string;
  lastName: string;

  associates: Associate[];
}

abstract class UserMethods {
  /** Joins first and last names with whitespace trimmed. */
  abstract fullName(): string;
}