Angular CLI build minification breaks my app

Question

After building a production version of my Angular 5 app with ng build --prod and testing it locally I run into the following issue, see the image below.

Something is making a call to /es which is for sure not something I wrote myself.

I think it has to do with minification/aot-compiler. The call is triggered by hitting a route that runs the following code

  export function resolveFn(){
    return Contact.$get().then( () => MailFolder.$get());
  }

Here, Contact.$get() translates to a get request to /contacts. This is done by a custom library that constructs route names based on the class name of some resource that is used in the app. A snippet that does this is displayed below

 class RelationConfiguration<T extends Resource, U extends Resource> {
      private path: string;

      constructor(public HostResource: IResourceConstructor<T>, public RelatedSource: IResourceConstructor<U>, public relationIdentifierKey) {
        this.path = `${toPluralDash(this.HostResource.name)}/$hostId/${toPluralDash(this.RelatedSource.name)}/$relatedId`;
      }
      getPath(hostInstance: T, relatedInstance: U = null, noId?: boolean) {
        const related = relatedInstance.id && !noId ? '/' + relatedInstance.id : '';
        return this.path.replace('$hostId', hostInstance.id.toString()).replace('/$relatedId', related);
      }
    }

When console.loging the values of this.path, all my resource classes are named es. So the AOT-compilation is breaking my code... How to fix this (other than avoiding using constructor.name)? Note that this only happens with the -prod flag. a "normal" build doesn't break it.

score 0 · Answer 1 · answered Jun 16 '18 at 07:26

In my opinion the simplest way would be to add some duplication. What I mean is - first extend your resource interfaces:

interface IResourceConstructor<T extends IResource> {
    new(...args: string[]): T;
    path: string;
}

Then add new property to concrete class

class ConcreteResource implements IResource {
    static path = 'ConcreteResource';
}

Finally you can use new property in your function:

 this.path = `${toPluralDash(this.HostResource.path)}/$hostId/${toPluralDash(this.RelatedSource.path)}/$relatedId`;

Angular CLI build minification breaks my app

1 Answers1