class-transformer: fix: builds fail with Angular 5 and Angular CLI when @Type is used

@sandcake Can be made more universal, I came to this solution (this works on angular 5):

export function serializeType<T>(object: T) {
  return function () { return object; }
}

export class CatalogItem {

  id: string;

  @Type(serializeType(CatalogCategory))
  category?: CatalogCategory = null;

  @Type(serializeType(PackingVariant))
  packing: PackingVariant;

  price: string = null;

}

From the workaround mentioned in angular/angular#20216 For now using:

class Type {
}

function getter() {
  return Type;
}

class Foo {
  @Type(getter)
  public ofType;
}

instead of :

class Type {
}

class Foo {
  @Type(() => Type)
  public ofType;
}

works

We need to wait until angular team fix this issue. For now solution to avoid this problem is following:

    @Type(forwardRef(() => Person) as any)
    author: Person;

Workaround is available https://github.com/angular/angular/issues/20216

I want to share my workaround that I put together after reading other advices here and there. It’s patching an ng script from @angular/cli@1.6.4 (current version at the moment of writing). Because of that it prevents updating @angular/cli, so be prepared.

1. Put a patched copy of ng somewhere in your repo. You can grab patched version from here: https://github.com/kirillgroshkov/angular-cli/blob/18f14d71bc5d73dba488f8fc1d08fd46d1d885f1/packages/%40angular/cli/bin/ng

Here’s what changed, compared to the original file: https://github.com/kirillgroshkov/angular-cli/commit/18f14d71bc5d73dba488f8fc1d08fd46d1d885f1

1. Add a postinstall script in your package.json that will run every time after you do npm install (or yarn install) and copy/overwrite ng from your location to node_modules/@angular/cli/bin/ng.

"postinstall": "echo 'patching @angular/cli' & cp ./other/ng ./node_modules/@angular/cli/bin"

1. Run your build as normal, you should see console.log message “!!! using patched @angular/cli”.
2. Profit

I resolved upgrading typescript to 2.7, throwing away forwardRef , and adding // @dynamic at the top of the class:

import { Expose, Type } from 'class-transformer';

import { LookupQueryDTO } from './lookup_dto';
import { LookupQueryInfo } from './lookup_query_info';

// @dynamic
export class LookupQueryComplete extends LookupQueryDTO {

	/** rootEntityName */
	@Expose()
	public rootEntityName: string;

	/** lookupQueryInfo */
	@Expose()
	@Type(() => LookupQueryInfo)
	public lookupQueryInfo: LookupQueryInfo;

}

https://github.com/angular/angular-cli/issues/8434

@gmavritsakis

I had the same issue with: Angular CLI 1.6.1 Typescript 2.4.2 Angular 5.0.2

Found a solution by changing typescript.js for now. Replace all the function function nodeCanBeDecorated(node) with the following code

function nodeCanBeDecorated(node) {
       switch (node.kind) {
           case 229 /* ClassDeclaration */:
               // classes are valid targets
               return true;
           case 149 /* PropertyDeclaration */:
               // property declarations are valid if their parent is a class declaration.
   			// return node.parent.kind === 229 /* ClassDeclaration */;
   			return (node.parent && node.parent.kind === 229) || (node.original && node.original.parent && node.original.parent.kind === 229);
           case 153 /* GetAccessor */:
           case 154 /* SetAccessor */:
           case 151 /* MethodDeclaration */:
               // if this method has a body and its parent is a class declaration, this is a valid target.
               return node.body !== undefined &&
   				// && node.parent.kind === 229 /* ClassDeclaration */;
   				(node.parent && node.parent.kind === 229) || (node.original && node.original.parent && node.original.parent.kind === 229);
           case 146 /* Parameter */:
               // if the parameter's parent has a body and its grandparent is a class declaration, this is a valid target;
               // return node.parent.body !== undefined
               //     && (node.parent.kind === 152 /* Constructor */
               //         || node.parent.kind === 151 /* MethodDeclaration */
               //         || node.parent.kind === 154 /* SetAccessor */)
   			//     && node.parent.parent.kind === 229 /* ClassDeclaration */;
   			
   			var parent = node.parent || (node.original && node.original.parent);
   			return parent && parent.body !== undefined &&
                     (parent.kind === 152
                        || parent.kind === 151
                        || parent.kind === 154) && parent.parent.kind === 229;
       }
       return false;
   }

Which comes from here, if you compile typescript: shlomiassaf/TypeScript@7017fa2

Hi, same problem here, and thanks for the workaround, it works! want to know if there’s gonna be a fix in next releases?

Also problem remain

class TransferType {
  static stringify(value: string) {
    return JSON.stringify(classToPlain(value));
  }

  static parse(value: string) {
    return plainToClass(ApplicationData, JSON.parse(value));
  }
}

export class Application {

  @Transform(TransferType.parse, { toClassOnly: true })
  @Transform(TransferType.stringify, { toPlainOnly: true })
  data: ApplicationData;

}

export class ApplicationData {

  @Type(() => User)
  person: User;

  @Type(() => Travel)
  travel: Travel;

  @Type(() => Consumption)
  consumptions: Consumption[];

  @Type(() => Additional)
  additional: Additional;

}

Oh, I same problem )) @Type(() => …) I forgot about them

Pass the function reference, don’t execute the function.